LadybirdBrowser/ladybird
1
1
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-12-26 20:55:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Handle flex reverse togther with justify-content

Browse Source 
Containers with both flex reverse and justify content would
sometimes place children outside the container. This happened
because it assumed any reversed container would have items
aligned to the right, which isn't true when using eg. `flex-end`.

Both `justify-content: start` and `justify-content: end` are now
also independent of the reverseness.
This commit is contained in:
PaddiM8 2023-07-25 23:51:29 +02:00 committed by Andreas Kling
parent 6266976e7a
commit a26f2f0aab
Notes: sideshowbarker 2024-07-19 16:53:28 +09:00 
Author: https://github.com/PaddiM8 🔰
Commit: https://github.com/SerenityOS/serenity/commit/a26f2f0aab3
Pull-request: https://github.com/SerenityOS/serenity/pull/20201
2 changed files with 48 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
Tests/LibWeb/Layout/expected/flex/justify-content-1.txt
View File

@ -148,19 +148,19 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (10,506) content-size 780x0 children: inline BlockContainer <(anonymous)> at (10,506) content-size 780x0 children: inline
TextNode <#text> TextNode <#text>
Box <div.row.reverse.outer.start> at (11,507) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline Box <div.row.reverse.outer.start> at (11,507) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (260,508) content-size 50x50 flex-item [BFC] children: inline BlockContainer <div> at (12,508) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [260,508 41.234375x17.46875] frag 0 from TextNode start: 0, length: 5, rect: [12,508 41.234375x17.46875]
"start" "start"
TextNode <#text> TextNode <#text>
BlockContainer <div> at (208,508) content-size 50x50 flex-item [BFC] children: inline BlockContainer <div> at (64,508) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [208,508 9.34375x17.46875] frag 0 from TextNode start: 0, length: 1, rect: [64,508 9.34375x17.46875]
"a" "a"
TextNode <#text> TextNode <#text>
BlockContainer <div> at (156,508) content-size 50x50 flex-item [BFC] children: inline BlockContainer <div> at (116,508) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [156,508 9.46875x17.46875] frag 0 from TextNode start: 0, length: 1, rect: [116,508 9.46875x17.46875]
"b" "b"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (10,568) content-size 780x0 children: inline BlockContainer <(anonymous)> at (10,568) content-size 780x0 children: inline
@ -184,37 +184,37 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (10,630) content-size 780x0 children: inline BlockContainer <(anonymous)> at (10,630) content-size 780x0 children: inline
TextNode <#text> TextNode <#text>
Box <div.row.reverse.outer.end> at (11,631) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline Box <div.row.reverse.outer.end> at (11,631) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (-40,632) content-size 50x50 flex-item [BFC] children: inline BlockContainer <div> at (260,632) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [-40,632 26.1875x17.46875] frag 0 from TextNode start: 0, length: 3, rect: [260,632 26.1875x17.46875]
"end" "end"
TextNode <#text> TextNode <#text>
BlockContainer <div> at (-92,632) content-size 50x50 flex-item [BFC] children: inline BlockContainer <div> at (208,632) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [-92,632 9.34375x17.46875] frag 0 from TextNode start: 0, length: 1, rect: [208,632 9.34375x17.46875]
"a" "a"
TextNode <#text> TextNode <#text>
BlockContainer <div> at (-144,632) content-size 50x50 flex-item [BFC] children: inline BlockContainer <div> at (156,632) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [-144,632 9.46875x17.46875] frag 0 from TextNode start: 0, length: 1, rect: [156,632 9.46875x17.46875]
"b" "b"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (10,692) content-size 780x0 children: inline BlockContainer <(anonymous)> at (10,692) content-size 780x0 children: inline
TextNode <#text> TextNode <#text>
Box <div.row.reverse.outer.flex-end> at (11,693) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline Box <div.row.reverse.outer.flex-end> at (11,693) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (-40,694) content-size 50x50 flex-item [BFC] children: inline BlockContainer <div> at (12,694) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [-40,694 61.765625x17.46875] frag 0 from TextNode start: 0, length: 8, rect: [12,694 61.765625x17.46875]
"flex-end" "flex-end"
TextNode <#text> TextNode <#text>
BlockContainer <div> at (-92,694) content-size 50x50 flex-item [BFC] children: inline BlockContainer <div> at (64,694) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [-92,694 9.34375x17.46875] frag 0 from TextNode start: 0, length: 1, rect: [64,694 9.34375x17.46875]
"a" "a"
TextNode <#text> TextNode <#text>
BlockContainer <div> at (-144,694) content-size 50x50 flex-item [BFC] children: inline BlockContainer <div> at (116,694) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [-144,694 9.46875x17.46875] frag 0 from TextNode start: 0, length: 1, rect: [116,694 9.46875x17.46875]
"b" "b"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (10,754) content-size 780x0 children: inline BlockContainer <(anonymous)> at (10,754) content-size 780x0 children: inline
@ -436,19 +436,19 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (10,3418) content-size 780x0 children: inline BlockContainer <(anonymous)> at (10,3418) content-size 780x0 children: inline
TextNode <#text> TextNode <#text>
Box <div.column.reverse.outer.start> at (11,3419) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline Box <div.column.reverse.outer.start> at (11,3419) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,3668) content-size 50x50 flex-item [BFC] children: inline BlockContainer <div> at (12,3420) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [12,3668 41.234375x17.46875] frag 0 from TextNode start: 0, length: 5, rect: [12,3420 41.234375x17.46875]
"start" "start"
TextNode <#text> TextNode <#text>
BlockContainer <div> at (12,3616) content-size 50x50 flex-item [BFC] children: inline BlockContainer <div> at (12,3472) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,3616 9.34375x17.46875] frag 0 from TextNode start: 0, length: 1, rect: [12,3472 9.34375x17.46875]
"a" "a"
TextNode <#text> TextNode <#text>
BlockContainer <div> at (12,3564) content-size 50x50 flex-item [BFC] children: inline BlockContainer <div> at (12,3524) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,3564 9.46875x17.46875] frag 0 from TextNode start: 0, length: 1, rect: [12,3524 9.46875x17.46875]
"b" "b"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (10,3720) content-size 780x0 children: inline BlockContainer <(anonymous)> at (10,3720) content-size 780x0 children: inline
@ -472,37 +472,37 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (10,4022) content-size 780x0 children: inline BlockContainer <(anonymous)> at (10,4022) content-size 780x0 children: inline
TextNode <#text> TextNode <#text>
Box <div.column.reverse.outer.end> at (11,4023) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline Box <div.column.reverse.outer.end> at (11,4023) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,3972) content-size 50x50 flex-item [BFC] children: inline BlockContainer <div> at (12,4272) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [12,3972 26.1875x17.46875] frag 0 from TextNode start: 0, length: 3, rect: [12,4272 26.1875x17.46875]
"end" "end"
TextNode <#text> TextNode <#text>
BlockContainer <div> at (12,3920) content-size 50x50 flex-item [BFC] children: inline BlockContainer <div> at (12,4220) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,3920 9.34375x17.46875] frag 0 from TextNode start: 0, length: 1, rect: [12,4220 9.34375x17.46875]
"a" "a"
TextNode <#text> TextNode <#text>
BlockContainer <div> at (12,3868) content-size 50x50 flex-item [BFC] children: inline BlockContainer <div> at (12,4168) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,3868 9.46875x17.46875] frag 0 from TextNode start: 0, length: 1, rect: [12,4168 9.46875x17.46875]
"b" "b"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (10,4324) content-size 780x0 children: inline BlockContainer <(anonymous)> at (10,4324) content-size 780x0 children: inline
TextNode <#text> TextNode <#text>
Box <div.column.reverse.outer.flex-end> at (11,4325) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline Box <div.column.reverse.outer.flex-end> at (11,4325) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,4274) content-size 50x50 flex-item [BFC] children: inline BlockContainer <div> at (12,4326) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [12,4274 61.765625x17.46875] frag 0 from TextNode start: 0, length: 8, rect: [12,4326 61.765625x17.46875]
"flex-end" "flex-end"
TextNode <#text> TextNode <#text>
BlockContainer <div> at (12,4222) content-size 50x50 flex-item [BFC] children: inline BlockContainer <div> at (12,4378) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,4222 9.34375x17.46875] frag 0 from TextNode start: 0, length: 1, rect: [12,4378 9.34375x17.46875]
"a" "a"
TextNode <#text> TextNode <#text>
BlockContainer <div> at (12,4170) content-size 50x50 flex-item [BFC] children: inline BlockContainer <div> at (12,4430) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,4170 9.46875x17.46875] frag 0 from TextNode start: 0, length: 1, rect: [12,4430 9.46875x17.46875]
"b" "b"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (10,4626) content-size 780x0 children: inline BlockContainer <(anonymous)> at (10,4626) content-size 780x0 children: inline

15
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View File

@ -1303,6 +1303,8 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
if (auto_margins == 0 && number_of_items > 0) { if (auto_margins == 0 && number_of_items > 0) {
switch (flex_container().computed_values().justify_content()) { switch (flex_container().computed_values().justify_content()) {
case CSS::JustifyContent::Start: case CSS::JustifyContent::Start:
initial_offset = 0;
break;
case CSS::JustifyContent::FlexStart: case CSS::JustifyContent::FlexStart:
if (is_direction_reverse()) { if (is_direction_reverse()) {
initial_offset = inner_main_size(flex_container()); initial_offset = inner_main_size(flex_container());
@ -1311,6 +1313,8 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
} }
break; break;
case CSS::JustifyContent::End: case CSS::JustifyContent::End:
initial_offset = inner_main_size(flex_container());
break;
case CSS::JustifyContent::FlexEnd: case CSS::JustifyContent::FlexEnd:
if (is_direction_reverse()) { if (is_direction_reverse()) {
initial_offset = 0; initial_offset = 0;
@ -1364,13 +1368,18 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
auto flex_region_render_cursor = FlexRegionRenderCursor::Left; auto flex_region_render_cursor = FlexRegionRenderCursor::Left;
switch (flex_container().computed_values().justify_content()) { switch (flex_container().computed_values().justify_content()) {
case CSS::JustifyContent::Start:
case CSS::JustifyContent::FlexStart: case CSS::JustifyContent::FlexStart:
case CSS::JustifyContent::Center:
case CSS::JustifyContent::SpaceAround:
case CSS::JustifyContent::SpaceBetween:
case CSS::JustifyContent::SpaceEvenly:
if (is_direction_reverse()) { if (is_direction_reverse()) {
flex_region_render_cursor = FlexRegionRenderCursor::Right; flex_region_render_cursor = FlexRegionRenderCursor::Right;
} }
break; break;
case CSS::JustifyContent::End: case CSS::JustifyContent::End:
flex_region_render_cursor = FlexRegionRenderCursor::Right;
break;
case CSS::JustifyContent::FlexEnd: case CSS::JustifyContent::FlexEnd:
if (!is_direction_reverse()) { if (!is_direction_reverse()) {
flex_region_render_cursor = FlexRegionRenderCursor::Right; flex_region_render_cursor = FlexRegionRenderCursor::Right;
@ -1392,7 +1401,7 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
+ item.padding.main_after + item.padding.main_after
+ space_between_items; + space_between_items;
if (is_direction_reverse()) { if (is_direction_reverse() && flex_region_render_cursor == FlexRegionRenderCursor::Right) {
item.main_offset = cursor_offset - item.main_size.value() - item.margins.main_after - item.borders.main_after - item.padding.main_after; item.main_offset = cursor_offset - item.main_size.value() - item.margins.main_after - item.borders.main_after - item.padding.main_after;
cursor_offset -= amount_of_main_size_used; cursor_offset -= amount_of_main_size_used;
} else if (flex_region_render_cursor == FlexRegionRenderCursor::Right) { } else if (flex_region_render_cursor == FlexRegionRenderCursor::Right) {
@ -1404,7 +1413,7 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
} }
}; };
if (is_direction_reverse() || flex_region_render_cursor == FlexRegionRenderCursor::Right) { if (flex_region_render_cursor == FlexRegionRenderCursor::Right) {
for (ssize_t i = flex_line.items.size() - 1; i >= 0; --i) { for (ssize_t i = flex_line.items.size() - 1; i >= 0; --i) {
auto& item = flex_line.items[i]; auto& item = flex_line.items[i];
place_item(item); place_item(item);