mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-19 09:17:38 +03:00
LibWeb: Convert background painting to new pixel units
This commit is contained in:
parent
4440af0870
commit
0233627545
Notes:
sideshowbarker
2024-07-17 03:12:53 +09:00
Author: https://github.com/AtkinsSJ Commit: https://github.com/SerenityOS/serenity/commit/0233627545 Pull-request: https://github.com/SerenityOS/serenity/pull/16448 Reviewed-by: https://github.com/awesomekling ✅
@ -18,18 +18,18 @@
|
||||
namespace Web::Painting {
|
||||
|
||||
// https://www.w3.org/TR/css-backgrounds-3/#backgrounds
|
||||
void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMetrics const& layout_node, Gfx::FloatRect const& border_rect, Color background_color, CSS::ImageRendering image_rendering, Vector<CSS::BackgroundLayerData> const* background_layers, BorderRadiiData const& border_radii)
|
||||
void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMetrics const& layout_node, CSSPixelRect const& border_rect, Color background_color, CSS::ImageRendering image_rendering, Vector<CSS::BackgroundLayerData> const* background_layers, BorderRadiiData const& border_radii)
|
||||
{
|
||||
auto& painter = context.painter();
|
||||
|
||||
struct BackgroundBox {
|
||||
Gfx::FloatRect rect;
|
||||
CSSPixelRect rect;
|
||||
BorderRadiiData radii;
|
||||
|
||||
inline void shrink(float top, float right, float bottom, float left)
|
||||
inline void shrink(CSSPixels top, CSSPixels right, CSSPixels bottom, CSSPixels left)
|
||||
{
|
||||
rect.shrink(top, right, bottom, left);
|
||||
radii.shrink(top, right, bottom, left);
|
||||
radii.shrink(top.value(), right.value(), bottom.value(), left.value());
|
||||
}
|
||||
};
|
||||
|
||||
@ -76,7 +76,7 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
|
||||
}
|
||||
|
||||
Gfx::AntiAliasingPainter aa_painter { painter };
|
||||
aa_painter.fill_rect_with_rounded_corners(color_box.rect.to_rounded<int>(),
|
||||
aa_painter.fill_rect_with_rounded_corners(context.rounded_device_rect(color_box.rect).to_type<int>(),
|
||||
background_color, color_box.radii.top_left.as_corner(), color_box.radii.top_right.as_corner(), color_box.radii.bottom_right.as_corner(), color_box.radii.bottom_left.as_corner());
|
||||
|
||||
if (!has_paintable_layers)
|
||||
@ -111,9 +111,10 @@ 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 };
|
||||
CSSPixelRect const& css_clip_rect = clip_box.rect;
|
||||
auto clip_rect = context.rounded_device_rect(css_clip_rect);
|
||||
painter.add_clip_rect(clip_rect.to_type<int>());
|
||||
ScopedCornerRadiusClip corner_clip { painter, clip_rect.to_type<int>(), clip_box.radii };
|
||||
|
||||
if (layer.clip == CSS::BackgroundBox::BorderBox) {
|
||||
// Shrink the effective clip rect if to account for the bits the borders will definitely paint over
|
||||
@ -122,12 +123,12 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
|
||||
}
|
||||
|
||||
auto& image = *layer.background_image;
|
||||
Gfx::FloatRect background_positioning_area;
|
||||
CSSPixelRect background_positioning_area;
|
||||
|
||||
// Attachment and Origin
|
||||
switch (layer.attachment) {
|
||||
case CSS::BackgroundAttachment::Fixed:
|
||||
background_positioning_area = layout_node.root().browsing_context().viewport_rect().to_type<float>();
|
||||
background_positioning_area = layout_node.root().browsing_context().viewport_rect().to_type<CSSPixels>();
|
||||
break;
|
||||
case CSS::BackgroundAttachment::Local:
|
||||
case CSS::BackgroundAttachment::Scroll:
|
||||
@ -136,33 +137,33 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
|
||||
}
|
||||
|
||||
// FIXME: Implement proper default 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());
|
||||
CSSPixels natural_image_width = image.natural_width().value_or(background_positioning_area.width().value());
|
||||
CSSPixels natural_image_height = image.natural_height().value_or(background_positioning_area.height().value());
|
||||
|
||||
// If any of these are zero, the NaNs will pop up in the painting code.
|
||||
if (background_positioning_area.is_empty() || natural_image_height <= 0 || natural_image_width <= 0)
|
||||
continue;
|
||||
|
||||
// Size
|
||||
Gfx::FloatRect image_rect;
|
||||
CSSPixelRect image_rect;
|
||||
switch (layer.size_type) {
|
||||
case CSS::BackgroundSize::Contain: {
|
||||
float max_width_ratio = background_positioning_area.width() / natural_image_width;
|
||||
float max_height_ratio = background_positioning_area.height() / natural_image_height;
|
||||
float max_width_ratio = (background_positioning_area.width() / natural_image_width).value();
|
||||
float max_height_ratio = (background_positioning_area.height() / natural_image_height).value();
|
||||
float ratio = min(max_width_ratio, max_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() / natural_image_width;
|
||||
float max_height_ratio = background_positioning_area.height() / natural_image_height;
|
||||
float max_width_ratio = (background_positioning_area.width() / natural_image_width).value();
|
||||
float max_height_ratio = (background_positioning_area.height() / natural_image_height).value();
|
||||
float ratio = max(max_width_ratio, max_height_ratio);
|
||||
image_rect.set_size(natural_image_width * ratio, natural_image_height * ratio);
|
||||
break;
|
||||
}
|
||||
case CSS::BackgroundSize::LengthPercentage: {
|
||||
float width;
|
||||
float height;
|
||||
CSSPixels width;
|
||||
CSSPixels height;
|
||||
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) {
|
||||
@ -197,10 +198,10 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
|
||||
// where round() is a function that returns the nearest natural number
|
||||
// (integer greater than zero).
|
||||
if (layer.repeat_x == CSS::Repeat::Round) {
|
||||
image_rect.set_width(background_positioning_area.width() / roundf(background_positioning_area.width() / image_rect.width()));
|
||||
image_rect.set_width(background_positioning_area.width() / round(background_positioning_area.width() / image_rect.width()));
|
||||
}
|
||||
if (layer.repeat_y == CSS::Repeat::Round) {
|
||||
image_rect.set_height(background_positioning_area.height() / roundf(background_positioning_area.height() / image_rect.height()));
|
||||
image_rect.set_height(background_positioning_area.height() / round(background_positioning_area.height() / image_rect.height()));
|
||||
}
|
||||
|
||||
// If background-repeat is round for one dimension only and if background-size is auto
|
||||
@ -216,18 +217,18 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
|
||||
}
|
||||
}
|
||||
|
||||
float space_x = background_positioning_area.width() - image_rect.width();
|
||||
float space_y = background_positioning_area.height() - image_rect.height();
|
||||
CSSPixels space_x = background_positioning_area.width() - image_rect.width();
|
||||
CSSPixels space_y = background_positioning_area.height() - image_rect.height();
|
||||
|
||||
// Position
|
||||
float offset_x = layer.position_offset_x.resolved(layout_node, CSS::Length::make_px(space_x)).to_px(layout_node);
|
||||
CSSPixels offset_x = layer.position_offset_x.resolved(layout_node, CSS::Length::make_px(space_x)).to_px(layout_node);
|
||||
if (layer.position_edge_x == CSS::PositionEdge::Right) {
|
||||
image_rect.set_right_without_resize(background_positioning_area.right() - offset_x);
|
||||
} else {
|
||||
image_rect.set_left(background_positioning_area.left() + offset_x);
|
||||
}
|
||||
|
||||
float offset_y = layer.position_offset_y.resolved(layout_node, CSS::Length::make_px(space_y)).to_px(layout_node);
|
||||
CSSPixels offset_y = layer.position_offset_y.resolved(layout_node, CSS::Length::make_px(space_y)).to_px(layout_node);
|
||||
if (layer.position_edge_y == CSS::PositionEdge::Bottom) {
|
||||
image_rect.set_bottom_without_resize(background_positioning_area.bottom() - offset_y);
|
||||
} else {
|
||||
@ -237,8 +238,8 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
|
||||
// Repetition
|
||||
bool repeat_x = false;
|
||||
bool repeat_y = false;
|
||||
float x_step = 0;
|
||||
float y_step = 0;
|
||||
CSSPixels x_step = 0;
|
||||
CSSPixels y_step = 0;
|
||||
|
||||
switch (layer.repeat_x) {
|
||||
case CSS::Repeat::Round:
|
||||
@ -246,13 +247,13 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
|
||||
repeat_x = true;
|
||||
break;
|
||||
case CSS::Repeat::Space: {
|
||||
int whole_images = background_positioning_area.width() / image_rect.width();
|
||||
int whole_images = (background_positioning_area.width() / image_rect.width()).value();
|
||||
if (whole_images <= 1) {
|
||||
x_step = image_rect.width();
|
||||
repeat_x = false;
|
||||
} else {
|
||||
float space = fmodf(background_positioning_area.width(), image_rect.width());
|
||||
x_step = image_rect.width() + ((float)space / (float)(whole_images - 1));
|
||||
auto space = fmod(background_positioning_area.width(), image_rect.width());
|
||||
x_step = image_rect.width() + (space / (float)(whole_images - 1));
|
||||
repeat_x = true;
|
||||
}
|
||||
break;
|
||||
@ -266,8 +267,8 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
|
||||
break;
|
||||
}
|
||||
// Move image_rect to the left-most tile position that is still visible
|
||||
if (repeat_x && image_rect.x() > clip_rect.x()) {
|
||||
auto x_delta = floorf(x_step * ceilf((image_rect.x() - clip_rect.x()) / x_step));
|
||||
if (repeat_x && image_rect.x() > css_clip_rect.x()) {
|
||||
auto x_delta = floor(x_step * ceil((image_rect.x() - css_clip_rect.x()) / x_step));
|
||||
image_rect.set_x(image_rect.x() - x_delta);
|
||||
}
|
||||
|
||||
@ -277,12 +278,12 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
|
||||
repeat_y = true;
|
||||
break;
|
||||
case CSS::Repeat::Space: {
|
||||
int whole_images = background_positioning_area.height() / image_rect.height();
|
||||
int whole_images = (background_positioning_area.height() / image_rect.height()).value();
|
||||
if (whole_images <= 1) {
|
||||
y_step = image_rect.height();
|
||||
repeat_y = false;
|
||||
} else {
|
||||
float space = fmodf(background_positioning_area.height(), image_rect.height());
|
||||
auto space = fmod(background_positioning_area.height(), image_rect.height());
|
||||
y_step = image_rect.height() + ((float)space / (float)(whole_images - 1));
|
||||
repeat_y = true;
|
||||
}
|
||||
@ -297,27 +298,27 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
|
||||
break;
|
||||
}
|
||||
// Move image_rect to the top-most tile position that is still visible
|
||||
if (repeat_y && image_rect.y() > clip_rect.y()) {
|
||||
auto y_delta = floorf(y_step * ceilf((image_rect.y() - clip_rect.y()) / y_step));
|
||||
if (repeat_y && image_rect.y() > css_clip_rect.y()) {
|
||||
auto y_delta = floor(y_step * ceil((image_rect.y() - css_clip_rect.y()) / y_step));
|
||||
image_rect.set_y(image_rect.y() - y_delta);
|
||||
}
|
||||
|
||||
float initial_image_x = image_rect.x();
|
||||
float image_y = image_rect.y();
|
||||
Optional<Gfx::IntRect> last_int_image_rect;
|
||||
CSSPixels initial_image_x = image_rect.x();
|
||||
CSSPixels image_y = image_rect.y();
|
||||
Optional<DevicePixelRect> last_image_device_rect;
|
||||
|
||||
image.resolve_for_size(layout_node, image_rect.size());
|
||||
image.resolve_for_size(layout_node, image_rect.size().to_type<float>());
|
||||
|
||||
while (image_y < clip_rect.bottom()) {
|
||||
while (image_y < css_clip_rect.bottom()) {
|
||||
image_rect.set_y(image_y);
|
||||
|
||||
float image_x = initial_image_x;
|
||||
while (image_x < clip_rect.right()) {
|
||||
auto image_x = initial_image_x;
|
||||
while (image_x < css_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 && int_image_rect.intersects(context.device_viewport_rect().to_type<int>()))
|
||||
image.paint(context, int_image_rect, image_rendering);
|
||||
last_int_image_rect = int_image_rect;
|
||||
auto image_device_rect = context.rounded_device_rect(image_rect);
|
||||
if (image_device_rect != last_image_device_rect && image_device_rect.intersects(context.device_viewport_rect()))
|
||||
image.paint(context, image_device_rect.to_type<int>(), image_rendering);
|
||||
last_image_device_rect = image_device_rect;
|
||||
if (!repeat_x)
|
||||
break;
|
||||
image_x += x_step;
|
||||
|
@ -1,18 +1,17 @@
|
||||
/*
|
||||
* Copyright (c) 2021, Sam Atkins <atkinssj@serenityos.org>
|
||||
* Copyright (c) 2021-2022, Sam Atkins <atkinssj@serenityos.org>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#pragma once
|
||||
|
||||
#include <LibGfx/Forward.h>
|
||||
#include <LibWeb/Forward.h>
|
||||
#include <LibWeb/Painting/BorderPainting.h>
|
||||
#include <LibWeb/Painting/PaintContext.h>
|
||||
|
||||
namespace Web::Painting {
|
||||
|
||||
void paint_background(PaintContext&, Layout::NodeWithStyleAndBoxModelMetrics const&, Gfx::FloatRect const&, Color background_color, CSS::ImageRendering, Vector<CSS::BackgroundLayerData> const*, BorderRadiiData const&);
|
||||
void paint_background(PaintContext&, Layout::NodeWithStyleAndBoxModelMetrics const&, CSSPixelRect const&, Color background_color, CSS::ImageRendering, Vector<CSS::BackgroundLayerData> const*, BorderRadiiData const&);
|
||||
|
||||
}
|
||||
|
@ -55,7 +55,7 @@ void InlinePaintable::paint(PaintContext& context, Painting::PaintPhase phase) c
|
||||
}
|
||||
|
||||
auto border_radii_data = Painting::normalized_border_radii_data(layout_node(), absolute_fragment_rect, top_left_border_radius, top_right_border_radius, bottom_right_border_radius, bottom_left_border_radius);
|
||||
Painting::paint_background(context, layout_node(), absolute_fragment_rect, computed_values().background_color(), computed_values().image_rendering(), &computed_values().background_layers(), border_radii_data);
|
||||
Painting::paint_background(context, layout_node(), absolute_fragment_rect.to_type<CSSPixels>(), computed_values().background_color(), computed_values().image_rendering(), &computed_values().background_layers(), border_radii_data);
|
||||
|
||||
if (auto computed_box_shadow = computed_values().box_shadow(); !computed_box_shadow.is_empty()) {
|
||||
Vector<Painting::ShadowData> resolved_box_shadow_data;
|
||||
|
@ -243,13 +243,13 @@ void PaintableBox::paint_background(PaintContext& context) const
|
||||
if (layout_box().is_body() && document().html_element()->should_use_body_background_properties())
|
||||
return;
|
||||
|
||||
Gfx::FloatRect background_rect;
|
||||
CSSPixelRect background_rect;
|
||||
Color background_color = computed_values().background_color();
|
||||
auto* background_layers = &computed_values().background_layers();
|
||||
|
||||
if (layout_box().is_root_element()) {
|
||||
// CSS 2.1 Appendix E.2: If the element is a root element, paint the background over the entire canvas.
|
||||
background_rect = context.device_viewport_rect().to_type<int>().to_type<float>();
|
||||
background_rect = context.css_viewport_rect();
|
||||
|
||||
// Section 2.11.2: If the computed value of background-image on the root element is none and its background-color is transparent,
|
||||
// user agents must instead propagate the computed values of the background properties from that element’s first HTML BODY child element.
|
||||
@ -258,13 +258,13 @@ void PaintableBox::paint_background(PaintContext& context) const
|
||||
background_color = document().background_color(context.palette());
|
||||
}
|
||||
} else {
|
||||
background_rect = absolute_padding_box_rect();
|
||||
background_rect = absolute_padding_box_rect().to_type<CSSPixels>();
|
||||
}
|
||||
|
||||
// HACK: If the Box has a border, use the bordered_rect to paint the background.
|
||||
// This way if we have a border-radius there will be no gap between the filling and actual border.
|
||||
if (computed_values().border_top().width || computed_values().border_right().width || computed_values().border_bottom().width || computed_values().border_left().width)
|
||||
background_rect = absolute_border_box_rect();
|
||||
background_rect = absolute_border_box_rect().to_type<CSSPixels>();
|
||||
|
||||
Painting::paint_background(context, layout_box(), background_rect, background_color, computed_values().image_rendering(), background_layers, normalized_border_radii_data());
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user