Skip to content

Commit 3d1ee5b

Browse files
AtkinsSJawesomekling
authored andcommitted
LibWeb: Implement background-size :^)
This is including the `cover` and `contain` modes.
1 parent 80642b4 commit 3d1ee5b

File tree

1 file changed

+41
-2
lines changed

1 file changed

+41
-2
lines changed

Userland/Libraries/LibWeb/Painting/BackgroundPainting.cpp

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
4747
// Note: Background layers are ordered front-to-back, so we paint them in reverse
4848
for (int layer_index = background_layers->size() - 1; layer_index >= 0; layer_index--) {
4949
auto& layer = background_layers->at(layer_index);
50+
// TODO: Gradients!
5051
if (!layer.image || !layer.image->bitmap())
5152
continue;
5253
auto& image = *layer.image->bitmap();
@@ -57,11 +58,49 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
5758
painter.add_clip_rect(clip_rect);
5859

5960
// FIXME: Attachment
60-
// FIXME: Size
61-
Gfx::IntRect image_rect { border_rect.x(), border_rect.y(), image.width(), image.height() };
6261

6362
// Origin
6463
auto background_positioning_area = get_box(layer.origin);
64+
65+
// Size
66+
Gfx::IntRect image_rect;
67+
switch (layer.size_type) {
68+
case CSS::BackgroundSize::Contain: {
69+
float max_width_ratio = (float)background_positioning_area.width() / (float)image.width();
70+
float max_height_ratio = (float)background_positioning_area.height() / (float)image.height();
71+
float ratio = min(max_width_ratio, max_height_ratio);
72+
image_rect.set_size(roundf(image.width() * ratio), roundf(image.height() * ratio));
73+
break;
74+
}
75+
case CSS::BackgroundSize::Cover: {
76+
float max_width_ratio = (float)background_positioning_area.width() / (float)image.width();
77+
float max_height_ratio = (float)background_positioning_area.height() / (float)image.height();
78+
float ratio = max(max_width_ratio, max_height_ratio);
79+
image_rect.set_size(roundf(image.width() * ratio), roundf(image.height() * ratio));
80+
break;
81+
}
82+
case CSS::BackgroundSize::LengthPercentage: {
83+
int width;
84+
int height;
85+
if (layer.size_x.is_auto() && layer.size_y.is_auto()) {
86+
width = image.width();
87+
height = image.height();
88+
} else if (layer.size_x.is_auto()) {
89+
height = layer.size_y.resolved_or_zero(layout_node, background_positioning_area.height()).to_px(layout_node);
90+
width = roundf(image.width() * ((float)height / (float)image.height()));
91+
} else if (layer.size_y.is_auto()) {
92+
width = layer.size_x.resolved_or_zero(layout_node, background_positioning_area.width()).to_px(layout_node);
93+
height = roundf(image.height() * ((float)width / (float)image.width()));
94+
} else {
95+
width = layer.size_x.resolved_or_zero(layout_node, background_positioning_area.width()).to_px(layout_node);
96+
height = layer.size_y.resolved_or_zero(layout_node, background_positioning_area.height()).to_px(layout_node);
97+
}
98+
99+
image_rect.set_size(width, height);
100+
break;
101+
}
102+
}
103+
65104
int space_x = background_positioning_area.width() - image_rect.width();
66105
int space_y = background_positioning_area.height() - image_rect.height();
67106

0 commit comments

Comments
 (0)