1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
|
/*
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
* Copyright (c) 2021, Sam Atkins <atkinssj@serenityos.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include <LibGfx/Painter.h>
#include <LibWeb/Layout/InitialContainingBlock.h>
#include <LibWeb/Layout/Node.h>
#include <LibWeb/Painting/BackgroundPainting.h>
#include <LibWeb/Painting/PaintContext.h>
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, 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
painter.fill_rect_with_rounded_corners(color_rect.to_rounded<int>(), background_color, border_radius.top_left, border_radius.top_right, border_radius.bottom_right, border_radius.bottom_left);
if (!background_layers)
return;
// Note: Background layers are ordered front-to-back, so we paint them in reverse
for (int layer_index = background_layers->size() - 1; layer_index >= 0; layer_index--) {
auto& layer = background_layers->at(layer_index);
// TODO: Gradients!
if (!layer.image || !layer.image->bitmap())
continue;
auto& image = *layer.image->bitmap();
// Clip
auto clip_rect = get_box(layer.clip);
painter.save();
painter.add_clip_rect(clip_rect.to_rounded<int>());
Gfx::FloatRect 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>();
break;
case CSS::BackgroundAttachment::Local:
case CSS::BackgroundAttachment::Scroll:
background_positioning_area = get_box(layer.origin);
break;
}
// 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 ratio = min(max_width_ratio, max_height_ratio);
image_rect.set_size(image.width() * ratio, 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 ratio = max(max_width_ratio, max_height_ratio);
image_rect.set_size(image.width() * ratio, image.height() * ratio);
break;
}
case CSS::BackgroundSize::LengthPercentage: {
float width;
float height;
bool x_is_auto = layer.size_x.is_length() && layer.size_x.length().is_auto();
bool y_is_auto = layer.size_y.is_length() && layer.size_y.length().is_auto();
if (x_is_auto && y_is_auto) {
width = image.width();
height = 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());
} 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());
} 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);
}
image_rect.set_size(width, height);
break;
}
}
// If background-repeat is round for one (or both) dimensions, there is a second step.
// The UA must scale the image in that dimension (or both dimensions) so that it fits a
// whole number of times in the background positioning area.
if (layer.repeat_x == CSS::Repeat::Round || layer.repeat_y == CSS::Repeat::Round) {
// If X ≠ 0 is the width of the image after step one and W is the width of the
// background positioning area, then the rounded width X' = W / round(W / X)
// 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() / background_positioning_area.width() / image_rect.width());
}
if (layer.repeat_y == CSS::Repeat::Round) {
image_rect.set_height(background_positioning_area.height() / background_positioning_area.height() / image_rect.height());
}
// If background-repeat is round for one dimension only and if background-size is auto
// for the other dimension, then there is a third step: that other dimension is scaled
// so that the original aspect ratio is restored.
if (layer.repeat_x != layer.repeat_y) {
if (layer.size_x.is_length() && layer.size_x.length().is_auto()) {
image_rect.set_width(image.width() * (image_rect.height() / image.height()));
}
if (layer.size_y.is_length() && layer.size_y.length().is_auto()) {
image_rect.set_height(image.height() * (image_rect.width() / image.width()));
}
}
}
float space_x = background_positioning_area.width() - image_rect.width();
float 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);
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);
if (layer.position_edge_y == CSS::PositionEdge::Bottom) {
image_rect.set_bottom_without_resize(background_positioning_area.bottom() - offset_y);
} else {
image_rect.set_top(background_positioning_area.top() + offset_y);
}
// Repetition
bool repeat_x = false;
bool repeat_y = false;
float x_step = 0;
float y_step = 0;
switch (layer.repeat_x) {
case CSS::Repeat::Round:
x_step = image_rect.width();
repeat_x = true;
break;
case CSS::Repeat::Space: {
int whole_images = background_positioning_area.width() / image_rect.width();
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));
repeat_x = true;
}
break;
}
case CSS::Repeat::Repeat:
x_step = image_rect.width();
repeat_x = true;
break;
case CSS::Repeat::NoRepeat:
repeat_x = false;
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));
image_rect.set_x(image_rect.x() - x_delta);
}
switch (layer.repeat_y) {
case CSS::Repeat::Round:
y_step = image_rect.height();
repeat_y = true;
break;
case CSS::Repeat::Space: {
int whole_images = background_positioning_area.height() / image_rect.height();
if (whole_images <= 1) {
y_step = image_rect.height();
repeat_y = false;
} else {
float space = fmodf(background_positioning_area.height(), image_rect.height());
y_step = image_rect.height() + ((float)space / (float)(whole_images - 1));
repeat_y = true;
}
break;
}
case CSS::Repeat::Repeat:
y_step = image_rect.height();
repeat_y = true;
break;
case CSS::Repeat::NoRepeat:
repeat_y = false;
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));
image_rect.set_y(image_rect.y() - y_delta);
}
// FIXME: Handle rounded corners
float initial_image_x = image_rect.x();
float image_y = image_rect.y();
while (image_y < clip_rect.bottom()) {
image_rect.set_y(image_y);
float image_x = initial_image_x;
while (image_x < clip_rect.right()) {
image_rect.set_x(image_x);
painter.draw_scaled_bitmap(image_rect.to_rounded<int>(), image, image.rect(), 1.0f, Gfx::Painter::ScalingMode::BilinearBlend);
if (!repeat_x)
break;
image_x += x_step;
}
if (!repeat_y)
break;
image_y += y_step;
}
painter.restore();
}
}
}
|
