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

LibWeb: Support <svg> elements with display: block

Browse source 
There are a couple of things that went into this:

- We now calculate the intrinsic width/height and aspect ratio of <svg>
  elements based on the spec algorithm instead of our previous ad-hoc
  guesswork solution.

- Replaced elements with automatic size and intrinsic aspect ratio but
  no intrinsic dimensions are now sized with the stretch-fit width
  formula.

- We take care to assign both used width and used height to <svg>
  elements before running their SVG formatting contexts. This ensures
  that the inside SVG content is laid out with knowledge of its
  viewport geometry.

- We avoid infinite recursion in tentative_height_for_replaced_element()
  by using the already-calculated used width instead of calling the
  function that calculates the used width (since that may call us right
  back again).
This commit is contained in:
Andreas Kling 2023-05-19 18:14:37 +02:00
parent 28d2e26678
commit f0560fd087
11 changed files with 107 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

110
Userland/Libraries/LibWeb/Layout/SVGSVGBox.cpp
View file

@ -24,70 +24,60 @@ JS::GCPtr<Painting::Paintable> SVGSVGBox::create_paintable() const
void SVGSVGBox::prepare_for_replaced_layout()
{
if (dom_node().has_attribute(HTML::AttributeNames::width) && dom_node().has_attribute(HTML::AttributeNames::height)) {
Optional<CSSPixels> w;
Optional<CSSPixels> h;
auto parsing_context = CSS::Parser::ParsingContext { document() };
auto width = parse_css_value(parsing_context, dom_node().attribute(Web::HTML::AttributeNames::width), CSS::PropertyID::Width).release_value_but_fixme_should_propagate_errors();
if (!width.is_null() && width->has_length())
w = width->to_length().to_px(*this);
// https://www.w3.org/TR/SVG2/coords.html#SizingSVGInCSS
auto height = parse_css_value(parsing_context, dom_node().attribute((HTML::AttributeNames::height)), CSS::PropertyID::Height).release_value_but_fixme_should_propagate_errors();
if (!height.is_null() && height->has_length())
h = height->to_length().to_px(*this);
if (w.has_value() && h.has_value()) {
set_intrinsic_width(*w);
set_intrinsic_height(*h);
set_intrinsic_aspect_ratio(w->value() / h->value());
return;
}
// The intrinsic dimensions must also be determined from the width and height sizing properties.
// If either width or height are not specified, the used value is the initial value 'auto'.
// 'auto' and percentage lengths must not be used to determine an intrinsic width or intrinsic height.
auto const& computed_width = computed_values().width();
if (computed_width.is_length() && !computed_width.contains_percentage()) {
set_intrinsic_width(computed_width.to_px(*this, 0));
}
Optional<CSSPixelRect> united_rect;
auto add_to_united_rect = [&](CSSPixelRect const& rect) {
if (united_rect.has_value())
united_rect = united_rect->united(rect);
else
united_rect = rect;
};
for_each_in_subtree_of_type<SVGGeometryBox>([&](SVGGeometryBox const& geometry_box) {
auto& dom_node = const_cast<SVG::SVGGeometryElement&>(geometry_box.dom_node());
if (dom_node.has_attribute(HTML::AttributeNames::width) && dom_node.has_attribute(HTML::AttributeNames::height)) {
CSSPixelRect rect;
// FIXME: Allow for relative lengths here
rect.set_width(computed_values().width().to_px(*this, 0));
rect.set_height(computed_values().height().to_px(*this, 0));
add_to_united_rect(rect);
return IterationDecision::Continue;
}
auto& path = dom_node.get_path();
auto path_bounding_box = path.bounding_box().to_type<CSSPixels>();
// Stroke increases the path's size by stroke_width/2 per side.
auto stroke_width = geometry_box.dom_node().stroke_width().value_or(0);
path_bounding_box.inflate(stroke_width, stroke_width);
auto& maybe_view_box = this->dom_node().view_box();
if (maybe_view_box.has_value()) {
auto view_box = maybe_view_box.value();
CSSPixelRect rect(view_box.min_x, view_box.min_y, view_box.width, view_box.height);
add_to_united_rect(rect);
return IterationDecision::Continue;
}
add_to_united_rect(path_bounding_box);
return IterationDecision::Continue;
});
if (united_rect.has_value()) {
set_intrinsic_width(united_rect->width());
set_intrinsic_height(united_rect->height());
set_intrinsic_aspect_ratio(united_rect->width().value() / united_rect->height().value());
auto const& computed_height = computed_values().height();
if (computed_height.is_length() && !computed_height.contains_percentage()) {
set_intrinsic_height(computed_height.to_px(*this, 0));
}
set_intrinsic_aspect_ratio(calculate_intrinsic_aspect_ratio());
}
Optional<float> SVGSVGBox::calculate_intrinsic_aspect_ratio() const
{
// https://www.w3.org/TR/SVG2/coords.html#SizingSVGInCSS
// The intrinsic aspect ratio must be calculated using the following algorithm. If the algorithm returns null, then there is no intrinsic aspect ratio.
auto const& computed_width = computed_values().width();
auto const& computed_height = computed_values().height();
// 1. If the width and height sizing properties on the ‘svg’ element are both absolute values:
if (computed_width.is_length() && !computed_width.contains_percentage() && computed_height.is_length() && !computed_height.contains_percentage()) {
auto width = computed_width.to_px(*this, 0);
auto height = computed_height.to_px(*this, 0);
if (width != 0 && height != 0) {
// 1. return width / height
return width.value() / height.value();
}
return {};
}
// FIXME: 2. If an SVG View is active:
// FIXME: 1. let viewbox be the viewbox defined by the active SVG View
// FIXME: 2. return viewbox.width / viewbox.height
// 3. If the ‘viewBox’ on the ‘svg’ element is correctly specified:
if (dom_node().view_box().has_value()) {
// 1. let viewbox be the viewbox defined by the ‘viewBox’ attribute on the ‘svg’ element
auto const& viewbox = dom_node().view_box().value();
// 2. return viewbox.width / viewbox.height
return viewbox.width / viewbox.height;
}
// 4. return null
return {};
}
}