system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-10-17 13:22:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Implement background-clip :^)

Browse source 
We now pass in the Layout Node so that we can read the BoxModelMetrics.
Renamed a couple of variables too for clarity.
This commit is contained in:
Sam Atkins 2021-11-12 20:12:56 +00:00 committed by Andreas Kling
parent aa43bee0d1
commit 6234e3fcb3
4 changed files with 51 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Userland/Libraries/LibWeb/Layout/Box.cpp
View file

@ -93,7 +93,7 @@ void Box::paint_background(PaintContext& context)
if (computed_values().border_top().width || computed_values().border_right().width || computed_values().border_bottom().width || computed_values().border_left().width)
background_rect = enclosing_int_rect(bordered_rect());
Painting::paint_background(context, background_rect, background_color, background_layers, normalized_border_radius_data());
Painting::paint_background(context, *this, background_rect, background_color, background_layers, normalized_border_radius_data());
}
void Box::paint_box_shadow(PaintContext& context)

2
Userland/Libraries/LibWeb/Layout/InlineNode.cpp
View file

@ -58,7 +58,7 @@ void InlineNode::paint(PaintContext& context, PaintPhase phase)
// FIXME: This recalculates our (InlineNode's) absolute_rect() for every single fragment!
auto rect = fragment.absolute_rect();
auto border_radius_data = Painting::normalized_border_radius_data(*this, rect, top_left_border_radius, top_right_border_radius, bottom_right_border_radius, bottom_left_border_radius);
Painting::paint_background(context, enclosing_int_rect(rect), computed_values().background_color(), &computed_values().background_layers(), border_radius_data);
Painting::paint_background(context, *this, enclosing_int_rect(rect), computed_values().background_color(), &computed_values().background_layers(), border_radius_data);
if (auto computed_box_shadow = computed_values().box_shadow(); computed_box_shadow.has_value()) {
auto box_shadow_data = Painting::BoxShadowData {

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

@ -6,15 +6,40 @@
*/
#include <LibGfx/Painter.h>
#include <LibWeb/Layout/Node.h>
#include <LibWeb/Painting/BackgroundPainting.h>
#include <LibWeb/Painting/PaintContext.h>
namespace Web::Painting {
void paint_background(PaintContext& context, Gfx::IntRect const& background_rect, Color background_color, Vector<CSS::BackgroundLayerData> const* background_layers, BorderRadiusData const& border_radius)
void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMetrics const& layout_node, Gfx::IntRect const& border_rect, Color background_color, Vector<CSS::BackgroundLayerData> const* background_layers, BorderRadiusData const& border_radius)
{
auto& painter = context.painter();
auto get_box = [&](CSS::BackgroundBox box) {
auto box_rect = border_rect;
switch (box) {
case CSS::BackgroundBox::ContentBox: {
auto& padding = layout_node.box_model().padding;
box_rect.shrink(padding.top, padding.right, padding.bottom, padding.left);
[[fallthrough]];
}
case CSS::BackgroundBox::PaddingBox: {
auto& border = layout_node.box_model().border;
box_rect.shrink(border.top, border.right, border.bottom, border.left);
[[fallthrough]];
}
case CSS::BackgroundBox::BorderBox:
default:
return box_rect;
}
};
auto color_rect = border_rect;
if (background_layers && !background_layers->is_empty())
color_rect = get_box(background_layers->last().clip);
// FIXME: Support elliptical corners
context.painter().fill_rect_with_rounded_corners(background_rect, background_color, border_radius.top_left, border_radius.top_right, border_radius.bottom_right, border_radius.bottom_left);
painter.fill_rect_with_rounded_corners(color_rect, background_color, border_radius.top_left, border_radius.top_right, border_radius.bottom_right, border_radius.bottom_left);
if (!background_layers)
return;
@ -26,7 +51,22 @@ void paint_background(PaintContext& context, Gfx::IntRect const& background_rect
continue;
auto& image = *layer.image->bitmap();
auto image_rect = background_rect;
// Clip
auto clip_rect = get_box(layer.clip);
painter.save();
painter.add_clip_rect(clip_rect);
auto painting_rect = border_rect;
// FIXME: Attachment
// FIXME: Size
int scaled_width = image.width();
int scaled_height = image.height();
// FIXME: Origin
// FIXME: Position
// Repetition
switch (layer.repeat_x) {
case CSS::Repeat::Round:
case CSS::Repeat::Space:
@ -35,7 +75,7 @@ void paint_background(PaintContext& context, Gfx::IntRect const& background_rect
// The background rect is already sized to align with 'repeat'.
break;
case CSS::Repeat::NoRepeat:
image_rect.set_width(min(image_rect.width(), image.width()));
painting_rect.set_width(min(painting_rect.width(), scaled_width));
break;
}
@ -47,12 +87,13 @@ void paint_background(PaintContext& context, Gfx::IntRect const& background_rect
// The background rect is already sized to align with 'repeat'.
break;
case CSS::Repeat::NoRepeat:
image_rect.set_height(min(image_rect.height(), image.height()));
painting_rect.set_height(min(painting_rect.height(), scaled_height));
break;
}
// FIXME: Handle rounded corners
context.painter().blit_tiled(image_rect, image, image.rect());
painter.blit_tiled(painting_rect, image, image.rect());
painter.restore();
}
}

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

@ -8,11 +8,12 @@
#include <LibGfx/Forward.h>
#include <LibWeb/CSS/StyleValue.h>
#include <LibWeb/Forward.h>
#include <LibWeb/Painting/BorderPainting.h>
#include <LibWeb/Painting/PaintContext.h>
namespace Web::Painting {
void paint_background(PaintContext&, Gfx::IntRect const&, Color background_color, Vector<CSS::BackgroundLayerData> const*, BorderRadiusData const&);
void paint_background(PaintContext&, Layout::NodeWithStyleAndBoxModelMetrics const&, Gfx::IntRect const&, Color background_color, Vector<CSS::BackgroundLayerData> const*, BorderRadiusData const&);
}