LibWeb: Ensure SVG image element respects viewBox

Previously, any active viewBox was ignored by SVG image elements.
This commit is contained in:
Tim Ledbetter 2025-09-01 12:09:21 +01:00 committed by Sam Atkins
parent 56c4e8199b
commit 7dade36d96
4 changed files with 27 additions and 15 deletions

View File

@ -462,7 +462,11 @@ void SVGFormattingContext::layout_graphics_element(SVGGraphicsBox const& graphic
void SVGFormattingContext::layout_image_element(SVGImageBox const& image_box)
{
auto& box_state = m_state.get_mutable(image_box);
auto bounding_box = image_box.dom_node().bounding_box();
// FIXME: Support transforms on SVG image elements.
auto to_css_pixels_transform = Gfx::AffineTransform {}
.multiply(m_current_viewbox_transform);
auto bounding_box = to_css_pixels_transform.map(image_box.dom_node().bounding_box()).to_type<CSSPixels>();
box_state.set_content_x(bounding_box.x());
box_state.set_content_y(bounding_box.y());
box_state.set_content_width(bounding_box.width());

View File

@ -124,33 +124,33 @@ GC::Ref<SVG::SVGAnimatedLength> SVGImageElement::height()
return *m_height;
}
Gfx::Rect<CSSPixels> SVGImageElement::bounding_box() const
Gfx::FloatRect SVGImageElement::bounding_box() const
{
Optional<CSSPixels> width;
Optional<float> width;
if (attribute(HTML::AttributeNames::width).has_value())
width = CSSPixels { m_width->base_val()->value() };
width = m_width->base_val()->value();
Optional<CSSPixels> height;
Optional<float> height;
if (attribute(HTML::AttributeNames::height).has_value())
height = CSSPixels { m_height->base_val()->value() };
height = m_height->base_val()->value();
if (!height.has_value() && width.has_value() && intrinsic_aspect_ratio().has_value())
height = width.value() / intrinsic_aspect_ratio().value();
height = width.value() / intrinsic_aspect_ratio().value().to_float();
if (!width.has_value() && height.has_value() && intrinsic_aspect_ratio().has_value())
width = height.value() * intrinsic_aspect_ratio().value();
width = height.value() * intrinsic_aspect_ratio().value().to_float();
if (!width.has_value() && intrinsic_width().has_value())
width = intrinsic_width();
width = intrinsic_width()->to_float();
if (!height.has_value() && intrinsic_height().has_value())
height = intrinsic_height();
height = intrinsic_height()->to_float();
return {
CSSPixels { m_x ? m_x->base_val()->value() : 0 },
CSSPixels { m_y ? m_y->base_val()->value() : 0 },
width.value_or(0),
height.value_or(0),
m_x ? m_x->base_val()->value() : 0.0f,
m_y ? m_y->base_val()->value() : 0.0f,
width.value_or(0.0f),
height.value_or(0.0f),
};
}

View File

@ -27,7 +27,7 @@ public:
GC::Ref<SVG::SVGAnimatedLength> width();
GC::Ref<SVG::SVGAnimatedLength> height();
Gfx::Rect<CSSPixels> bounding_box() const;
Gfx::FloatRect bounding_box() const;
RefPtr<Gfx::ImmutableBitmap> default_image_bitmap_sized(Gfx::IntSize) const;

View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:h="http://www.w3.org/1999/xhtml" viewBox="0 0 3 3" width="200" height="200">
<metadata>
<title>&lt;image&gt; embedding SVG image with auto height</title>
<h:link rel="match" href="../../../../expected/wpt-import/svg/embedded/reference/green-rect-100x100.svg"/>
</metadata>
<image href="data:image/svg+xml,&lt;svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' &gt;&lt;rect width='50' height='50' fill='green'/&gt;&lt;/svg&gt;" width="1.5"/>
</svg>

After

Width:  |  Height:  |  Size: 524 B