瀏覽代碼

LibWeb: Make empty images (no bitmap, no alt text) take no layout space

This matches the behavior of other browsers.
Andreas Kling 1 年之前
父節點
當前提交
dd3e002ecf

+ 10 - 0
Tests/LibWeb/Layout/expected/empty-image-should-be-zero-sized.txt

@@ -0,0 +1,10 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x33 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x17 children: inline
+      frag 0 from ImageBox start: 0, length: 0, rect: [8,21 0x0] baseline: 0
+      ImageBox <img> at (8,21) content-size 0x0 children: not-inline
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x33]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x17]
+      ImagePaintable (ImageBox<IMG>) [8,21 0x0]

+ 10 - 10
Tests/LibWeb/Layout/expected/floating-replaced-element-percentage-padding-against-indefinite-width.txt

@@ -1,13 +1,13 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
-  BlockContainer <html> at (0,0) content-size 800x80 [BFC] children: not-inline
-    BlockContainer <body> at (8,8) content-size 784x64 children: not-inline
-      Box <div#box1> at (8,8) content-size 784x64 flex-container(row) [FFC] children: not-inline
-        BlockContainer <div> at (8,8) content-size 16x64 flex-item [BFC] children: not-inline
-          ImageBox <img#box2> at (24,24) content-size 16x32 floating flex-container(row) children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x16 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x0 children: not-inline
+      Box <div#box1> at (8,8) content-size 784x0 flex-container(row) [FFC] children: not-inline
+        BlockContainer <div> at (8,8) content-size 0x0 flex-item [BFC] children: not-inline
+          ImageBox <img#box2> at (8,8) content-size 0x0 floating flex-container(row) children: not-inline
 
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
-  PaintableWithLines (BlockContainer<HTML>) [0,0 800x80]
-    PaintableWithLines (BlockContainer<BODY>) [8,8 784x64]
-      PaintableBox (Box<DIV>#box1) [8,8 784x64]
-        PaintableWithLines (BlockContainer<DIV>) [8,8 16x64] overflow: [8,8 48x64]
-          ImagePaintable (ImageBox<IMG>#box2) [8,8 48x64]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x16]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x0]
+      PaintableBox (Box<DIV>#box1) [8,8 784x0]
+        PaintableWithLines (BlockContainer<DIV>) [8,8 0x0]
+          ImagePaintable (ImageBox<IMG>#box2) [8,8 0x0]

+ 9 - 9
Tests/LibWeb/Layout/expected/misc/corner-radius.txt

@@ -1,12 +1,12 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
-  BlockContainer <html> at (0,0) content-size 800x48 [BFC] children: not-inline
-    BlockContainer <body> at (8,8) content-size 1x32 children: not-inline
-      BlockContainer <div> at (8,8) content-size 1x32 [BFC] children: inline
-        frag 0 from ImageBox start: 0, length: 0, rect: [8,8 16x32] baseline: 32
-        ImageBox <img> at (8,8) content-size 16x32 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x33 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 1x17 children: not-inline
+      BlockContainer <div> at (8,8) content-size 1x17 [BFC] children: inline
+        frag 0 from ImageBox start: 0, length: 0, rect: [8,21 0x0] baseline: 0
+        ImageBox <img> at (8,21) content-size 0x0 children: not-inline
 
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
-  PaintableWithLines (BlockContainer<HTML>) [0,0 800x48]
-    PaintableWithLines (BlockContainer<BODY>) [8,8 1x32]
-      PaintableWithLines (BlockContainer<DIV>) [8,8 1x32] overflow: [8,8 16x32]
-        ImagePaintable (ImageBox<IMG>) [8,8 16x32]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x33]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 1x17]
+      PaintableWithLines (BlockContainer<DIV>) [8,8 1x17]
+        ImagePaintable (ImageBox<IMG>) [8,21 0x0]

+ 6 - 6
Tests/LibWeb/Layout/expected/svg/svg-as-image-invalid.txt

@@ -1,9 +1,9 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
-  BlockContainer <html> at (0,0) content-size 800x48 [BFC] children: not-inline
-    BlockContainer <body> at (8,8) content-size 784x32 children: not-inline
-      ImageBox <img> at (8,8) content-size 16x32 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x16 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x0 children: not-inline
+      ImageBox <img> at (8,8) content-size 0x0 children: not-inline
 
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
-  PaintableWithLines (BlockContainer<HTML>) [0,0 800x48]
-    PaintableWithLines (BlockContainer<BODY>) [8,8 784x32]
-      ImagePaintable (ImageBox<IMG>) [8,8 16x32]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x16]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x0]
+      ImagePaintable (ImageBox<IMG>) [8,8 0x0]

+ 1 - 0
Tests/LibWeb/Layout/input/empty-image-should-be-zero-sized.html

@@ -0,0 +1 @@
+<!doctype html><img>

+ 12 - 7
Userland/Libraries/LibWeb/Layout/ImageBox.cpp

@@ -36,16 +36,21 @@ void ImageBox::prepare_for_replaced_layout()
 
     if (renders_as_alt_text()) {
         auto const& element = verify_cast<HTML::HTMLElement>(dom_node());
-        auto& font = Platform::FontPlugin::the().default_font();
         auto alt = element.get_attribute_value(HTML::AttributeNames::alt);
 
-        CSSPixels alt_text_width = 0;
-        if (!m_cached_alt_text_width.has_value())
-            m_cached_alt_text_width = CSSPixels::nearest_value_for(font.width(alt));
-        alt_text_width = m_cached_alt_text_width.value();
+        if (alt.is_empty()) {
+            set_natural_width(0);
+            set_natural_height(0);
+        } else {
+            auto const& font = Platform::FontPlugin::the().default_font();
+            CSSPixels alt_text_width = 0;
+            if (!m_cached_alt_text_width.has_value())
+                m_cached_alt_text_width = CSSPixels::nearest_value_for(font.width(alt));
+            alt_text_width = m_cached_alt_text_width.value();
 
-        set_natural_width(alt_text_width + 16);
-        set_natural_height(CSSPixels::nearest_value_for(font.pixel_size()) + 16);
+            set_natural_width(alt_text_width + 16);
+            set_natural_height(CSSPixels::nearest_value_for(font.pixel_size()) + 16);
+        }
     }
 
     if (!has_natural_width() && !has_natural_height()) {