mirror of
https://github.com/RGBCube/serenity
synced 2025-07-26 05:57:44 +00:00
LibWeb: Support <svg> elements with display: block
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:
parent
28d2e26678
commit
f0560fd087
11 changed files with 107 additions and 74 deletions
|
@ -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 {};
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue