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

This matches the behavior of other browsers.
This commit is contained in:
Andreas Kling 2024-03-29 07:16:53 +01:00 committed by Tim Flynn
parent 43e55668eb
commit dd3e002ecf
Notes: sideshowbarker 2024-07-17 01:13:25 +09:00
6 changed files with 48 additions and 32 deletions

View file

@ -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]

View file

@ -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]

View file

@ -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]

View file

@ -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]

View file

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

View file

@ -36,9 +36,13 @@ 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);
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));
@ -47,6 +51,7 @@ void ImageBox::prepare_for_replaced_layout()
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()) {
// FIXME: Do something.