LibWeb: Treat percentage max-width as none during min-content sizing

...but only for non-replaced boxes. This is what CSS-SIZING-3 tells us
to do, and we were already doing it for width, but neglecting max-width.
This commit is contained in:
Andreas Kling 2025-09-28 12:48:41 +02:00 committed by Andreas Kling
parent 652e52d76a
commit f00f975cf4
3 changed files with 43 additions and 1 deletions

View File

@ -1926,11 +1926,15 @@ bool FormattingContext::should_treat_max_width_as_none(Box const& box, Available
return true;
if (available_width.is_max_content() && max_width.is_max_content())
return true;
// https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-contribution
if (max_width.contains_percentage()) {
if (available_width.is_max_content())
return true;
if (available_width.is_min_content())
if (available_width.is_min_content()) {
if (!box.is_replaced_box())
return true;
return false;
}
if (!m_state.get(*box.non_anonymous_containing_block()).has_definite_width())
return true;
}

View File

@ -0,0 +1,15 @@
Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] children: not-inline
BlockContainer <html> at [0,0] [0+0+0 800 0+0+0] [0+0+0 200 0+0+0] [BFC] children: not-inline
Box <body> at [8,8] flex-container(row) [8+0+0 300 0+0+492] [8+0+0 200 0+0+8] [FFC] children: not-inline
BlockContainer <div#item2> at [8,8] flex-item [0+0+0 100 0+0+0] [0+0+0 50 0+0+0] [BFC] children: not-inline
BlockContainer <div#item2-inner> at [8,8] [0+0+0 50 0+0+50] [0+0+0 50 0+0+0] children: inline
TextNode <#text> (not painted)
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x200] overflow: [0,0 800x208]
PaintableBox (Box<BODY>) [8,8 300x200]
PaintableWithLines (BlockContainer<DIV>#item2) [8,8 100x50]
PaintableWithLines (BlockContainer<DIV>#item2-inner) [8,8 50x50]
SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x200] [children: 0] (z-index: auto)

View File

@ -0,0 +1,23 @@
<!doctype html><style type="text/css">
* { outline: 1px solid black; }
html {
height: 200px;
}
body {
display: flex;
width: 300px;
height: 200px;
}
#item2 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 25px;
height: 50px;
}
#item2-inner {
max-width: 50%;
width: 100px;
height: 50px;
background: orange;
}
</style><body><div id="item2"><div id="item2-inner">