RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 13:07:46 +00:00
Code Issues Activity Actions

LibWeb: Don't round numbers too early when painting backgrounds

Browse source 
Preserve floating point precision and delay rounding until the last
moment when figuring out where to paint background layers. This fixes an
issue on Acid3 where a thin sliver of red was visible because the
background X position was incorrectly rounded by 1px.
This commit is contained in:
Andreas Kling 2022-03-29 18:34:02 +02:00
parent afebc372b9
commit 18048efce0
1 changed files with 18 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -73,25 +73,25 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
}
// Size
Gfx::IntRect image_rect;
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(roundf(image.width() * ratio), roundf(image.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(roundf(image.width() * ratio), roundf(image.height() * ratio));
image_rect.set_size(image.width() * ratio, image.height() * ratio);
break;
}
case CSS::BackgroundSize::LengthPercentage: {
int width;
int height;
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) {
@ -99,10 +99,10 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
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 = roundf(image.width() * ((float)height / (float)image.height()));
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 = roundf(image.height() * ((float)width / (float)image.width()));
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);
@ -122,10 +122,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((float)background_positioning_area.width() / roundf((float)background_positioning_area.width() / (float)image_rect.width()));
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((float)background_positioning_area.height() / roundf((float)background_positioning_area.height() / (float)image_rect.height()));
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
@ -133,26 +133,26 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
// 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((float)image.width() * ((float)image_rect.height() / (float)image.height()));
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((float)image.height() * ((float)image_rect.width() / (float)image.width()));
image_rect.set_height(image.height() * (image_rect.width() / image.width()));
}
}
}
int space_x = background_positioning_area.width() - image_rect.width();
int space_y = background_positioning_area.height() - image_rect.height();
float space_x = background_positioning_area.width() - image_rect.width();
float space_y = background_positioning_area.height() - image_rect.height();
// Position
int offset_x = layer.position_offset_x.resolved(layout_node, CSS::Length::make_px(space_x)).to_px(layout_node);
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);
}
int offset_y = layer.position_offset_y.resolved(layout_node, CSS::Length::make_px(space_y)).to_px(layout_node);
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 {
@ -231,12 +231,12 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
float initial_image_x = image_rect.x();
float image_y = image_rect.y();
while (image_y < clip_rect.bottom()) {
image_rect.set_y(roundf(image_y));
image_rect.set_y(image_y);
float image_x = initial_image_x;
while (image_x < clip_rect.right()) {
image_rect.set_x(roundf(image_x));
painter.draw_scaled_bitmap(image_rect, image, image.rect(), 1.0f, Gfx::Painter::ScalingMode::BilinearBlend);
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;