mirror of
https://github.com/SerenityOS/serenity
synced 2024-09-06 17:06:31 +00:00
LibWeb: Initial offset in reverse flex layout moved to opposite side
This change moves the initial offset for justify-content: center to the opposite side if the flex layout is in the reverse direction.
This commit is contained in:
parent
6ae208dbf6
commit
8200d1f68b
|
@ -0,0 +1,19 @@
|
||||||
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
|
BlockContainer <html> at (0,0) content-size 800x66 [BFC] children: not-inline
|
||||||
|
BlockContainer <body> at (8,8) content-size 784x50 children: not-inline
|
||||||
|
Box <div.flex> at (8,8) content-size 784x50 flex-container(row-reverse) [FFC] children: not-inline
|
||||||
|
BlockContainer <div> at (425,8) content-size 50x50 flex-item [BFC] children: inline
|
||||||
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 1, rect: [425,8 6.34375x17.46875]
|
||||||
|
"1"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div> at (375,8) content-size 50x50 flex-item [BFC] children: inline
|
||||||
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 1, rect: [375,8 8.8125x17.46875]
|
||||||
|
"2"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div> at (325,8) content-size 50x50 flex-item [BFC] children: inline
|
||||||
|
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 1, rect: [325,8 9.09375x17.46875]
|
||||||
|
"3"
|
||||||
|
TextNode <#text>
|
|
@ -0,0 +1,11 @@
|
||||||
|
<!doctype html><style>
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.flex > div {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}</style><body><div class="flex"><div style="background-color: red;">1</div><div style="background-color: blue;">2</div><div style="background-color: yellow;">3</div>
|
|
@ -1268,6 +1268,9 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
|
||||||
break;
|
break;
|
||||||
case CSS::JustifyContent::Center:
|
case CSS::JustifyContent::Center:
|
||||||
initial_offset = (inner_main_size(flex_container()) - used_main_space) / 2.0f;
|
initial_offset = (inner_main_size(flex_container()) - used_main_space) / 2.0f;
|
||||||
|
if (is_direction_reverse()) {
|
||||||
|
initial_offset = inner_main_size(flex_container()) - initial_offset;
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
case CSS::JustifyContent::SpaceBetween:
|
case CSS::JustifyContent::SpaceBetween:
|
||||||
space_between_items = flex_line.remaining_free_space / (number_of_items - 1);
|
space_between_items = flex_line.remaining_free_space / (number_of_items - 1);
|
||||||
|
|
Loading…
Reference in a new issue