mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-12-03 21:10:30 +00:00
LibWeb: Fix handling of max-content containing block for floating box
Fixes layout of page toolbar on Wikipedia.
This commit is contained in:
Andi Gallo
Alexander Kalenik
parent
97ba1ff1f7
commit
b6f9f4c28c
Notes:
sideshowbarker
2024-07-17 01:11:48 +09:00
Author: https://github.com/axgallo Commit: https://github.com/SerenityOS/serenity/commit/b6f9f4c28c Pull-request: https://github.com/SerenityOS/serenity/pull/20540 Reviewed-by: https://github.com/kalenikaliaksandr ✅
5 changed files with 94 additions and 16 deletions
|
|
@ -0,0 +1,27 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x0 children: not-inline
|
||||
Box <div.display_flex> at (8,8) content-size 23.609375x17.46875 floating flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <div> at (8,8) content-size 23.609375x17.46875 flex-item [BFC] children: not-inline
|
||||
BlockContainer <div> at (8,8) content-size 23.609375x17.46875 floating [BFC] children: not-inline
|
||||
BlockContainer <span> at (8,8) content-size 14.265625x17.46875 floating [BFC] children: inline
|
||||
line 0 width: 14.265625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,8 14.265625x17.46875]
|
||||
"A"
|
||||
TextNode <#text>
|
||||
BlockContainer <span> at (22.265625,8) content-size 9.34375x17.46875 floating [BFC] children: inline
|
||||
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [22.265625,8 9.34375x17.46875]
|
||||
"B"
|
||||
TextNode <#text>
|
||||
|
||||
PaintableWithLines (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x0] overflow: [8,8 23.609375x17.46875]
|
||||
PaintableBox (Box<DIV>.display_flex) [8,8 23.609375x17.46875]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,8 23.609375x17.46875]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,8 23.609375x17.46875]
|
||||
PaintableWithLines (BlockContainer<SPAN>) [8,8 14.265625x17.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<SPAN>) [22.265625,8 9.34375x17.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x0 children: not-inline
|
||||
BlockContainer <div> at (8,8) content-size 23.609375x17.46875 floating [BFC] children: not-inline
|
||||
BlockContainer <span> at (8,8) content-size 14.265625x17.46875 floating [BFC] children: inline
|
||||
line 0 width: 14.265625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [8,8 14.265625x17.46875]
|
||||
"A"
|
||||
TextNode <#text>
|
||||
BlockContainer <span> at (22.265625,8) content-size 9.34375x17.46875 floating [BFC] children: inline
|
||||
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [22.265625,8 9.34375x17.46875]
|
||||
"B"
|
||||
TextNode <#text>
|
||||
|
||||
PaintableWithLines (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x0] overflow: [8,8 23.609375x17.46875]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,8 23.609375x17.46875]
|
||||
PaintableWithLines (BlockContainer<SPAN>) [8,8 14.265625x17.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<SPAN>) [22.265625,8 9.34375x17.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<style>
|
||||
.display_flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
div {
|
||||
float: left;
|
||||
}
|
||||
|
||||
span {
|
||||
float: left;
|
||||
}
|
||||
</style><div class="display_flex"><div><div><span>A</span><span>B</span></div></div></div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<style>
|
||||
div {
|
||||
float: left;
|
||||
}
|
||||
|
||||
span {
|
||||
float: left;
|
||||
}
|
||||
</style><div><span>A</span><span>B</span></div>
|
||||
|
|
@ -290,10 +290,7 @@ void BlockFormattingContext::compute_width_for_floating_box(Box const& box, Avai
|
|||
auto& computed_values = box.computed_values();
|
||||
|
||||
auto zero_value = CSS::Length::make_px(0);
|
||||
auto width_of_containing_block = available_space.width.to_px_or_zero();
|
||||
auto width_of_containing_block_as_length_for_resolve = CSS::Length::make_px(width_of_containing_block);
|
||||
if (!available_space.width.is_definite())
|
||||
width_of_containing_block_as_length_for_resolve = CSS::Length::make_px(0);
|
||||
auto width_of_containing_block_as_length_for_resolve = CSS::Length::make_px(available_space.width.to_px_or_zero());
|
||||
|
||||
auto margin_left = computed_values.margin().left().resolved(box, width_of_containing_block_as_length_for_resolve);
|
||||
auto margin_right = computed_values.margin().right().resolved(box, width_of_containing_block_as_length_for_resolve);
|
||||
|
|
@ -309,18 +306,24 @@ void BlockFormattingContext::compute_width_for_floating_box(Box const& box, Avai
|
|||
auto compute_width = [&](auto width) {
|
||||
// If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.
|
||||
if (width.is_auto()) {
|
||||
|
||||
// Find the available width: in this case, this is the width of the containing
|
||||
// block minus the used values of 'margin-left', 'border-left-width', 'padding-left',
|
||||
// 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.
|
||||
auto available_width = width_of_containing_block
|
||||
- margin_left.to_px(box) - computed_values.border_left().width - padding_left
|
||||
- padding_right - computed_values.border_right().width - margin_right.to_px(box);
|
||||
|
||||
auto result = calculate_shrink_to_fit_widths(box);
|
||||
|
||||
// Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
|
||||
width = CSS::Length::make_px(min(max(result.preferred_minimum_width, available_width), result.preferred_width));
|
||||
if (available_space.width.is_definite()) {
|
||||
// Find the available width: in this case, this is the width of the containing
|
||||
// block minus the used values of 'margin-left', 'border-left-width', 'padding-left',
|
||||
// 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.
|
||||
auto available_width = available_space.width.to_px_or_zero()
|
||||
- margin_left.to_px(box) - computed_values.border_left().width - padding_left
|
||||
- padding_right - computed_values.border_right().width - margin_right.to_px(box);
|
||||
// Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
|
||||
width = CSS::Length::make_px(min(max(result.preferred_minimum_width, available_width), result.preferred_width));
|
||||
} else if (available_space.width.is_indefinite() || available_space.width.is_max_content()) {
|
||||
// Fold the formula for shrink-to-fit width for indefinite and max-content available width.
|
||||
width = CSS::Length::make_px(result.preferred_width);
|
||||
} else {
|
||||
// Fold the formula for shrink-to-fit width for min-content available width.
|
||||
width = CSS::Length::make_px(min(result.preferred_minimum_width, result.preferred_width));
|
||||
}
|
||||
}
|
||||
|
||||
return width;
|
||||
|
|
@ -898,7 +901,6 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer
|
|||
VERIFY(box.is_floating());
|
||||
|
||||
auto& box_state = m_state.get_mutable(box);
|
||||
CSSPixels width_of_containing_block = available_space.width.to_px_or_zero();
|
||||
|
||||
resolve_vertical_box_model_metrics(box);
|
||||
|
||||
|
|
@ -957,7 +959,11 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer
|
|||
bool fits_next_to_preceding_float = false;
|
||||
if (side == FloatSide::Left) {
|
||||
tentative_offset_from_edge = preceding_float.offset_from_edge + preceding_float_state.content_width() + preceding_float_state.margin_box_right() + box_state.margin_box_left();
|
||||
fits_next_to_preceding_float = (tentative_offset_from_edge + box_state.content_width() + box_state.margin_box_right()) <= width_of_containing_block;
|
||||
if (available_space.width.is_definite()) {
|
||||
fits_next_to_preceding_float = (tentative_offset_from_edge + box_state.content_width() + box_state.margin_box_right()) <= available_space.width.to_px_or_zero();
|
||||
} else if (available_space.width.is_max_content() || available_space.width.is_indefinite()) {
|
||||
fits_next_to_preceding_float = true;
|
||||
}
|
||||
} else {
|
||||
tentative_offset_from_edge = preceding_float.offset_from_edge + preceding_float_state.margin_box_left() + box_state.margin_box_right() + box_state.content_width();
|
||||
fits_next_to_preceding_float = tentative_offset_from_edge >= 0;
|
||||
|
|
|
|||
Loading…
Reference in a new issue