vaev-layout: Fix double creation of <img> block wrapper by enforcing it being treated as inline-block.

Since we are pushing directly into the wrapper content, a helper was creaeted what lead to some refactoring benefitting from it.

Author: pauloamed

src/vaev-layout/builder.cpp

@@ -261,6 +261,10 @@ struct BuilderContext {
         rootInlineBox().endInlineBox();
     }
 
+    Content& content() {
+        return _parent.content;
+    }
+
     BuilderContext toBlockContext(Box& parent, InlineBox& rootInlineBox) {
         return {
             From::BLOCK,
@@ -354,19 +358,17 @@ static void _buildText(BuilderContext bc, Gc::Ref<Dom::Text> node, Rc<Style::Spe
     }
 }
 
-static void _buildImage(Gc::Ref<Dom::Element> el, InlineBox& rootInlineBox) {
+static void _buildImage(BuilderContext bc, Gc::Ref<Dom::Element> el) {
     auto src = el->getAttribute(Html::SRC_ATTR).unwrapOr(""s);
     auto url = Mime::Url::resolveReference(el->baseURI(), Mime::parseUrlOrPath(src))
                    .unwrapOr("bundle://vaev-driver/missing.qoi"_url);
 
-    auto img = Karm::Image::load(url).unwrapOrElse([] {
+    bc.content() = Karm::Image::load(url).unwrapOrElse([] {
         return Karm::Image::loadOrFallback("bundle://vaev-driver/missing.qoi"_url).unwrap();
     });
-
-    rootInlineBox.add({el->specifiedValues(), el->computedValues()->fontFace, img, el});
 }
 
-static void _buildInputProse(Gc::Ref<Dom::Element> el, Box& parent) {
+static void _buildInputProse(BuilderContext bc, Gc::Ref<Dom::Element> el) {
     auto font = el->computedValues()->fontFace;
     Resolver resolver{
         .rootFont = Text::Font{font, 16},
@@ -383,7 +385,7 @@ static void _buildInputProse(Gc::Ref<Dom::Element> el, Box& parent) {
     auto prose = makeRc<Text::Prose>(proseStyle, value);
 
     // FIXME: we should guarantee that input has no children (not added before nor to add after)
-    parent.content = InlineBox{prose};
+    bc.content() = InlineBox{prose};
 }
 
 always_inline static bool isVoidElement(Gc::Ref<Dom::Element> el) {
@@ -392,12 +394,21 @@ always_inline static bool isVoidElement(Gc::Ref<Dom::Element> el) {
 
 static void _buildVoidElement(BuilderContext bc, Gc::Ref<Dom::Element> el) {
     if (el->tagName == Html::INPUT) {
-        _buildInputProse(el, bc._parent);
+        _buildInputProse(bc, el);
     } else if (el->tagName == Html::IMG) {
-        _buildImage(*el, bc.rootInlineBox());
+        _buildImage(bc, el);
     }
 }
 
+// NOTE: When inlines, <svg> and <img> should not be treated as inline-flow (<span>) and should thus be inside a strut,
+// that is, should be inline-block, where we always create a box to wrap around.
+// These els are special cases since all other els can take whichever display is set in their style. However, for these
+// els, an internal display value will never be valid. This relates to a somewhat "replaced" property from these
+// elements, but <img> is replaced whereas <svg> per se is not.
+bool _alwaysInlineBlock(Gc::Ref<Dom::Element> el) {
+    return el->tagName == Html::IMG or el->tagName == Svg::SVG;
+}
+
 // MARK: Build flow -------------------------------------------------------------------------------
 
 static void _buildChildren(BuilderContext bc, Gc::Ref<Dom::Node> parent);
@@ -736,11 +747,11 @@ static void _buildChildDefaultDisplay(BuilderContext bc, Gc::Ref<Dom::Element> c
         bc.flushRootInlineBoxIntoAnonymousBox();
         _innerDisplayDispatchCreationOfBlockLevelBox(bc, child, childStyle, display);
     } else {
-        if (display == Display::Inside::FLOW) {
+        // NOTE: <img> and <svg>, for example, should always be treated as inline-block instead of inline-flow (spans)
+        if (_alwaysInlineBlock(child) or display != Display::Inside::FLOW)
+            _innerDisplayDispatchCreationOfInlineLevelBox(bc, child, childStyle, display);
+        else
             createAndBuildInlineFlowfromElement(bc, childStyle, child);
-            return;
-        }
-        _innerDisplayDispatchCreationOfInlineLevelBox(bc, child, childStyle, display);
     }
 }