RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 15:57:34 +00:00
Code Issues Activity Actions

LibWeb: Support two-value background-repeat

Browse source 
The background-repeat value may be specified as either one- or two-value
identifiers (to be interpreted as horizontal and vertical repeat). This
adds two pseudo-properties, background-repeat-x and background-repeat-y,
to handle this. One-value identifiers are mapped to two-value in
accordance with the spec.
This commit is contained in:
Timothy Flynn 2021-04-05 12:05:35 -04:00 • committed by Andreas Kling
parent 0794d879f3
commit 5de0e0068c
12 changed files with 152 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -50,7 +50,7 @@ void Box::paint(PaintContext& context, PaintPhase phase)
context.painter().fill_rect(background_rect, computed_values().background_color());
if (background_image() && background_image()->bitmap()) {
paint_background_image(context, *background_image()->bitmap(), computed_values().background_repeat(), move(background_rect));
paint_background_image(context, *background_image()->bitmap(), computed_values().background_repeat_x(), computed_values().background_repeat_y(), move(background_rect));
}
}
@ -87,22 +87,30 @@ void Box::paint(PaintContext& context, PaintPhase phase)
void Box::paint_background_image(
PaintContext& context,
const Gfx::Bitmap& background_image,
CSS::Repeat background_repeat,
CSS::Repeat background_repeat_x,
CSS::Repeat background_repeat_y,
Gfx::IntRect background_rect)
{
switch (background_repeat) {
switch (background_repeat_x) {
case CSS::Repeat::Round:
case CSS::Repeat::Space:
// FIXME: Support 'round' and 'space'. Fall through to 'repeat' since that most closely resembles these.
case CSS::Repeat::Repeat:
// The background rect is already sized to align with 'repeat'.
break;
case CSS::Repeat::RepeatX:
background_rect.set_height(background_image.height());
break;
case CSS::Repeat::RepeatY:
case CSS::Repeat::NoRepeat:
background_rect.set_width(background_image.width());
break;
}
switch (background_repeat_y) {
case CSS::Repeat::Round:
case CSS::Repeat::Space:
// FIXME: Support 'round' and 'space'. Fall through to 'repeat' since that most closely resembles these.
case CSS::Repeat::Repeat:
// The background rect is already sized to align with 'repeat'.
break;
case CSS::Repeat::NoRepeat:
default: // FIXME: Support 'round' and 'square'
background_rect.set_width(background_image.width());
background_rect.set_height(background_image.height());
break;
}

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

@ -153,7 +153,7 @@ protected:
virtual void did_set_rect() { }
void paint_background_image(PaintContext&, const Gfx::Bitmap&, CSS::Repeat, Gfx::IntRect);
void paint_background_image(PaintContext&, const Gfx::Bitmap&, CSS::Repeat, CSS::Repeat, Gfx::IntRect);
Vector<LineBox> m_line_boxes;

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

@ -69,7 +69,7 @@ void InitialContainingBlockBox::paint_document_background(PaintContext& context)
if (auto background_bitmap = document().background_image()) {
Gfx::IntRect background_rect = { 0, 0, context.viewport_rect().x() + context.viewport_rect().width(), context.viewport_rect().y() + context.viewport_rect().height() };
paint_background_image(context, *background_bitmap, document().background_repeat(), move(background_rect));
paint_background_image(context, *background_bitmap, document().background_repeat_x(), document().background_repeat_y(), move(background_rect));
}
}

10
Userland/Libraries/LibWeb/Layout/Node.cpp
View file

@ -234,9 +234,13 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& specified_style)
m_background_image = static_ptr_cast<CSS::ImageStyleValue>(bgimage.value());
}
auto background_repeat = specified_style.background_repeat();
if (background_repeat.has_value())
computed_values.set_background_repeat(background_repeat.value());
auto background_repeat_x = specified_style.background_repeat_x();
if (background_repeat_x.has_value())
computed_values.set_background_repeat_x(background_repeat_x.value());
auto background_repeat_y = specified_style.background_repeat_y();
if (background_repeat_y.has_value())
computed_values.set_background_repeat_y(background_repeat_y.value());
computed_values.set_display(specified_style.display());