Bladeren bron

LibWeb: Use width & height to create fallback viewBox for SVG-as-image

When embedding an SVG in an img element, if the external SVG's root
element has both width and height attributes, but no viewBox attribute,
we now create a fallback viewBox with "0 0 width height".

This appears to match the behavior of other browsers. Inspired by
discussion on Mozilla's bug tracker:
https://bugzilla.mozilla.org/show_bug.cgi?id=614649
Andreas Kling 2 jaren geleden
bovenliggende
commit
9f24c1b34c

+ 8 - 0
Tests/LibWeb/Layout/expected/svg/svg-as-image-implicit-viewbox.txt

@@ -0,0 +1,8 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x116 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x100 children: not-inline
+      ImageBox <img> at (8,8) content-size 50x100 children: not-inline
+        (SVG-as-image isolated context)
+        Viewport <#document> at (0,0) content-size 50x100 children: inline
+          SVGSVGBox <svg> at (0,0) content-size 50x100 [SVG] children: not-inline
+            SVGGeometryBox <rect> at (0,0) content-size 50x100 children: not-inline

+ 1 - 0
Tests/LibWeb/Layout/input/svg/svg-as-image-implicit-viewbox.html

@@ -0,0 +1 @@
+<!doctype html><img src="svg-without-viewbox.svg" style="display: block; width: 50px;">

+ 1 - 0
Tests/LibWeb/Layout/input/svg/svg-without-viewbox.svg

@@ -0,0 +1 @@
+<svg width="100" height="200" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="100" height="200" fill="green" /></svg>

+ 1 - 1
Userland/Libraries/LibWeb/Layout/SVGFormattingContext.cpp

@@ -159,7 +159,7 @@ void SVGFormattingContext::run(Box const& box, LayoutMode layout_mode, Available
             auto path_transform = dom_node.get_transform();
 
             double viewbox_scale = 1;
-            auto& maybe_view_box = svg_svg_element.view_box();
+            auto maybe_view_box = svg_svg_element.view_box();
             if (maybe_view_box.has_value()) {
                 // FIXME: This should allow just one of width or height to be specified.
                 // E.g. We should be able to layout <svg width="100%"> where height is unspecified/auto.

+ 48 - 0
Userland/Libraries/LibWeb/SVG/SVGSVGElement.cpp

@@ -7,6 +7,7 @@
 
 #include <LibWeb/CSS/Parser/Parser.h>
 #include <LibWeb/CSS/StyleComputer.h>
+#include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
 #include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/Event.h>
@@ -77,6 +78,53 @@ void SVGSVGElement::parse_attribute(DeprecatedFlyString const& name, DeprecatedS
         m_view_box = try_parse_view_box(value);
     if (name.equals_ignoring_ascii_case(SVG::AttributeNames::preserveAspectRatio))
         m_preserve_aspect_ratio = AttributeParser::parse_preserve_aspect_ratio(value);
+    if (name.equals_ignoring_ascii_case(SVG::AttributeNames::width) || name.equals_ignoring_ascii_case(SVG::AttributeNames::height))
+        update_fallback_view_box_for_svg_as_image();
+}
+
+void SVGSVGElement::update_fallback_view_box_for_svg_as_image()
+{
+    // AD-HOC: This creates a fallback viewBox for SVGs used as images.
+    //         If the <svg> element has width and height, but no viewBox,
+    //         we fall back to a synthetic viewBox="0 0 width height".
+
+    Optional<double> width;
+    Optional<double> height;
+
+    auto width_attribute = attribute(SVG::AttributeNames::width);
+    auto parsing_context = CSS::Parser::ParsingContext { document() };
+    if (auto width_value = parse_css_value(parsing_context, attribute(Web::HTML::AttributeNames::width), CSS::PropertyID::Width).release_value_but_fixme_should_propagate_errors()) {
+        if (width_value->is_length() && width_value->as_length().length().is_absolute())
+            width = width_value->as_length().length().absolute_length_to_px().to_double();
+    }
+
+    auto height_attribute = attribute(SVG::AttributeNames::height);
+    if (auto height_value = parse_css_value(parsing_context, attribute(Web::HTML::AttributeNames::height), CSS::PropertyID::Height).release_value_but_fixme_should_propagate_errors()) {
+        if (height_value->is_length() && height_value->as_length().length().is_absolute())
+            height = height_value->as_length().length().absolute_length_to_px().to_double();
+    }
+
+    if (width.has_value() && height.has_value()) {
+        m_fallback_view_box_for_svg_as_image = ViewBox { 0, 0, width.value(), height.value() };
+    } else {
+        m_fallback_view_box_for_svg_as_image = {};
+    }
+}
+
+void SVGSVGElement::set_fallback_view_box_for_svg_as_image(Optional<ViewBox> view_box)
+{
+    m_fallback_view_box_for_svg_as_image = view_box;
+}
+
+Optional<ViewBox> SVGSVGElement::view_box() const
+{
+    if (m_view_box.has_value())
+        return m_view_box;
+
+    if (m_fallback_view_box_for_svg_as_image.has_value())
+        return m_fallback_view_box_for_svg_as_image;
+
+    return {};
 }
 
 }

+ 7 - 1
Userland/Libraries/LibWeb/SVG/SVGSVGElement.h

@@ -24,9 +24,11 @@ public:
     virtual bool requires_svg_container() const override { return false; }
     virtual bool is_svg_container() const override { return true; }
 
-    Optional<ViewBox> const& view_box() const { return m_view_box; }
+    [[nodiscard]] Optional<ViewBox> view_box() const;
     Optional<PreserveAspectRatio> const& preserve_aspect_ratio() const { return m_preserve_aspect_ratio; }
 
+    void set_fallback_view_box_for_svg_as_image(Optional<ViewBox>);
+
 private:
     SVGSVGElement(DOM::Document&, DOM::QualifiedName);
 
@@ -36,8 +38,12 @@ private:
 
     virtual void parse_attribute(DeprecatedFlyString const& name, DeprecatedString const& value) override;
 
+    void update_fallback_view_box_for_svg_as_image();
+
     Optional<ViewBox> m_view_box;
     Optional<PreserveAspectRatio> m_preserve_aspect_ratio;
+
+    Optional<ViewBox> m_fallback_view_box_for_svg_as_image;
 };
 
 }