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

LibWeb: Implement the default sizing algorithm steps for backgrounds

Browse source 
This now correctly handles sizing SVG backgrounds that have no natural
width/height, but do have a natural aspect ratio.

Fixes #20992
This commit is contained in:
MacDue 2023-12-28 00:08:00 +01:00 • committed by Andreas Kling
parent d2c96e213f
commit 8c59f359eb
1 changed files with 65 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,6 +18,48 @@
namespace Web::Painting {
// https://drafts.csswg.org/css-images/#default-sizing
static CSSPixelSize run_default_sizing_algorithm(
Optional<CSSPixels> specified_width, Optional<CSSPixels> specified_height,
Optional<CSSPixels> natural_width, Optional<CSSPixels> natural_height,
Optional<CSSPixelFraction> natural_aspect_ratio,
CSSPixelSize default_size)
{
// If the specified size is a definite width and height, the concrete object size is given that width and height.
if (specified_width.has_value() && specified_height.has_value())
return CSSPixelSize { specified_width.value(), specified_height.value() };
// If the specified size is only a width or height (but not both) then the concrete object size is given that specified width or height.
// The other dimension is calculated as follows:
if (specified_width.has_value() || specified_height.has_value()) {
// 1. If the object has a natural aspect ratio,
// the missing dimension of the concrete object size is calculated using that aspect ratio and the present dimension.
if (natural_aspect_ratio.has_value() && !natural_aspect_ratio->might_be_saturated()) {
if (specified_width.has_value())
return CSSPixelSize { specified_width.value(), (CSSPixels(1) / natural_aspect_ratio.value()) * specified_width.value() };
if (specified_height.has_value())
return CSSPixelSize { specified_height.value() * natural_aspect_ratio.value(), specified_height.value() };
}
// 2. Otherwise, if the missing dimension is present in the object’s natural dimensions,
// the missing dimension is taken from the object’s natural dimensions.
if (specified_height.has_value() && natural_width.has_value())
return CSSPixelSize { natural_width.value(), specified_height.value() };
if (specified_width.has_value() && natural_height.has_value())
return CSSPixelSize { specified_width.value(), natural_height.value() };
// 3. Otherwise, the missing dimension of the concrete object size is taken from the default object size.
if (specified_height.has_value())
return CSSPixelSize { default_size.width(), specified_height.value() };
if (specified_width.has_value())
return CSSPixelSize { specified_width.value(), default_size.height() };
VERIFY_NOT_REACHED();
}
// If the specified size has no constraints:
// 1. If the object has a natural height or width, its size is resolved as if its natural dimensions were given as the specified size.
if (natural_width.has_value() || natural_height.has_value())
return run_default_sizing_algorithm(natural_width, natural_height, natural_width, natural_height, natural_aspect_ratio, default_size);
// FIXME: 2. Otherwise, its size is resolved as a contain constraint against the default object size.
return default_size;
}
// https://www.w3.org/TR/css-backgrounds-3/#backgrounds
void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMetrics const& layout_node, CSSPixelRect const& border_rect, Color background_color, CSS::ImageRendering image_rendering, Vector<CSS::BackgroundLayerData> const* background_layers, BorderRadiiData const& border_radii)
{
@ -150,54 +192,44 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
break;
}
// FIXME: Implement proper default sizing algorithm: https://drafts.csswg.org/css-images/#default-sizing
CSSPixels natural_image_width = image.natural_width().value_or(background_positioning_area.width());
CSSPixels natural_image_height = image.natural_height().value_or(background_positioning_area.height());
Optional<CSSPixels> specified_width {};
Optional<CSSPixels> specified_height {};
if (layer.size_type == CSS::BackgroundSize::LengthPercentage) {
if (!layer.size_x.is_auto())
specified_width = layer.size_x.to_px(layout_node, background_positioning_area.width());
if (!layer.size_y.is_auto())
specified_height = layer.size_y.to_px(layout_node, background_positioning_area.height());
}
auto concrete_image_size = run_default_sizing_algorithm(
specified_width, specified_height,
image.natural_width(), image.natural_height(), image.natural_aspect_ratio(),
background_positioning_area.size());
// If any of these are zero, the NaNs will pop up in the painting code.
if (background_positioning_area.is_empty() || natural_image_height <= 0 || natural_image_width <= 0)
if (background_positioning_area.is_empty() || concrete_image_size.is_empty())
continue;
// Size
CSSPixelRect image_rect;
switch (layer.size_type) {
case CSS::BackgroundSize::Contain: {
double max_width_ratio = (background_positioning_area.width() / natural_image_width).to_double();
double max_height_ratio = (background_positioning_area.height() / natural_image_height).to_double();
double max_width_ratio = (background_positioning_area.width() / concrete_image_size.width()).to_double();
double max_height_ratio = (background_positioning_area.height() / concrete_image_size.height()).to_double();
double ratio = min(max_width_ratio, max_height_ratio);
image_rect.set_size(natural_image_width.scaled(ratio), natural_image_height.scaled(ratio));
image_rect.set_size(concrete_image_size.width().scaled(ratio), concrete_image_size.height().scaled(ratio));
break;
}
case CSS::BackgroundSize::Cover: {
double max_width_ratio = (background_positioning_area.width() / natural_image_width).to_double();
double max_height_ratio = (background_positioning_area.height() / natural_image_height).to_double();
double max_width_ratio = (background_positioning_area.width() / concrete_image_size.width()).to_double();
double max_height_ratio = (background_positioning_area.height() / concrete_image_size.height()).to_double();
double ratio = max(max_width_ratio, max_height_ratio);
image_rect.set_size(natural_image_width.scaled(ratio), natural_image_height.scaled(ratio));
image_rect.set_size(concrete_image_size.width().scaled(ratio), concrete_image_size.height().scaled(ratio));
break;
}
case CSS::BackgroundSize::LengthPercentage: {
CSSPixels width;
CSSPixels height;
bool x_is_auto = layer.size_x.is_auto();
bool y_is_auto = layer.size_y.is_auto();
if (x_is_auto && y_is_auto) {
width = natural_image_width;
height = natural_image_height;
} else if (x_is_auto) {
height = layer.size_y.to_px(layout_node, background_positioning_area.height());
width = natural_image_width * (height / natural_image_height);
} else if (y_is_auto) {
width = layer.size_x.to_px(layout_node, background_positioning_area.width());
height = natural_image_height * (width / natural_image_width);
} else {
width = layer.size_x.to_px(layout_node, background_positioning_area.width());
height = layer.size_y.to_px(layout_node, background_positioning_area.height());
}
image_rect.set_size(width, height);
case CSS::BackgroundSize::LengthPercentage:
image_rect.set_size(concrete_image_size);
break;
}
}
// If after sizing we have a 0px image, we're done. Attempting to paint this would be an infinite loop.
if (image_rect.is_empty())
@ -223,10 +255,10 @@ 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_auto()) {
image_rect.set_width(natural_image_width * (image_rect.height() / natural_image_height));
image_rect.set_width(image_rect.height() * (concrete_image_size.width() / concrete_image_size.height()));
}
if (layer.size_y.is_auto()) {
image_rect.set_height(natural_image_height * (image_rect.width() / natural_image_width));
image_rect.set_height(image_rect.width() * (concrete_image_size.height() / concrete_image_size.width()));
}
}
}