mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 19:17:44 +00:00
LibWeb: Support start
and end
alignment values in flex layout
These should just behave the same as `flex-start` and `flex-end`.
This commit is contained in:
parent
abd6380cce
commit
9e807d7c6a
4 changed files with 69 additions and 0 deletions
|
@ -0,0 +1,31 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (1,1) content-size 798x284.40625 [BFC] children: not-inline
|
||||
BlockContainer <body> at (10,10) content-size 780x266.40625 children: not-inline
|
||||
Box <div.flex.row.align-start> at (11,11) content-size 500x200 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <div> at (12,12) content-size 136.5x17.46875 flex-item [BFC] children: inline
|
||||
line 0 width: 136.5, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 18, rect: [12,12 136.5x17.46875]
|
||||
"align-items: start"
|
||||
TextNode <#text>
|
||||
Box <div.flex.align-end> at (11,213) content-size 500x19.46875 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <div> at (12,214) content-size 121.453125x17.46875 flex-item [BFC] children: inline
|
||||
line 0 width: 121.453125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 16, rect: [12,214 121.453125x17.46875]
|
||||
"align-items: end"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (10,233.46875) content-size 780x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div.flex.align-start> at (11,234.46875) content-size 500x19.46875 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <div> at (12,235.46875) content-size 136.5x17.46875 flex-item [BFC] children: inline
|
||||
line 0 width: 136.5, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 18, rect: [12,235.46875 136.5x17.46875]
|
||||
"align-items: start"
|
||||
TextNode <#text>
|
||||
Box <div.flex.column.align-end> at (11,255.9375) content-size 500x19.46875 flex-container(column) [FFC] children: not-inline
|
||||
BlockContainer <div> at (388.546875,256.9375) content-size 121.453125x17.46875 flex-item [BFC] children: inline
|
||||
line 0 width: 121.453125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 16, rect: [388.546875,256.9375 121.453125x17.46875]
|
||||
"align-items: end"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (10,276.40625) content-size 780x0 children: inline
|
||||
TextNode <#text>
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html><style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
width: 500px;
|
||||
background: pink;
|
||||
}
|
||||
.row {
|
||||
flex-direction: row;
|
||||
height: 200px;
|
||||
}
|
||||
.column {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex > div {
|
||||
background: orange;
|
||||
}
|
||||
.align-start {
|
||||
align-items: start;
|
||||
}
|
||||
.align-end {
|
||||
align-items: end;
|
||||
}
|
||||
</style>
|
||||
<div class="flex row align-start"><div>align-items: start</div></div><div class="flex align-end"><div>align-items: end</div></div>
|
||||
<div class="flex align-start"><div>align-items: start</div></div><div class="flex column align-end"><div>align-items: end</div></div>
|
|
@ -10,12 +10,14 @@
|
|||
"align-items": [
|
||||
"baseline",
|
||||
"center",
|
||||
"end",
|
||||
"flex-end",
|
||||
"flex-start",
|
||||
"normal",
|
||||
"safe",
|
||||
"self-end",
|
||||
"self-start",
|
||||
"start",
|
||||
"stretch",
|
||||
"unsafe"
|
||||
],
|
||||
|
@ -23,12 +25,14 @@
|
|||
"auto",
|
||||
"baseline",
|
||||
"center",
|
||||
"end",
|
||||
"flex-end",
|
||||
"flex-start",
|
||||
"normal",
|
||||
"safe",
|
||||
"self-end",
|
||||
"self-start",
|
||||
"start",
|
||||
"stretch",
|
||||
"unsafe"
|
||||
],
|
||||
|
|
|
@ -1461,6 +1461,8 @@ CSS::AlignItems FlexFormattingContext::alignment_for_item(Box const& box) const
|
|||
return CSS::AlignItems::Center;
|
||||
case CSS::AlignSelf::Baseline:
|
||||
return CSS::AlignItems::Baseline;
|
||||
case CSS::AlignSelf::Start:
|
||||
return CSS::AlignItems::Start;
|
||||
case CSS::AlignSelf::Stretch:
|
||||
return CSS::AlignItems::Stretch;
|
||||
case CSS::AlignSelf::Safe:
|
||||
|
@ -1482,10 +1484,12 @@ void FlexFormattingContext::align_all_flex_items_along_the_cross_axis()
|
|||
case CSS::AlignItems::Baseline:
|
||||
// FIXME: Implement this
|
||||
// Fallthrough
|
||||
case CSS::AlignItems::Start:
|
||||
case CSS::AlignItems::FlexStart:
|
||||
case CSS::AlignItems::Stretch:
|
||||
item.cross_offset = -half_line_size + item.margins.cross_before + item.borders.cross_before + item.padding.cross_before;
|
||||
break;
|
||||
case CSS::AlignItems::End:
|
||||
case CSS::AlignItems::FlexEnd:
|
||||
item.cross_offset = half_line_size - item.cross_size.value() - item.margins.cross_after - item.borders.cross_after - item.padding.cross_after;
|
||||
break;
|
||||
|
@ -2136,10 +2140,12 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c
|
|||
case CSS::AlignItems::Baseline:
|
||||
// FIXME: Implement this
|
||||
// Fallthrough
|
||||
case CSS::AlignItems::Start:
|
||||
case CSS::AlignItems::FlexStart:
|
||||
case CSS::AlignItems::Stretch:
|
||||
cross_offset = -half_line_size + cross_margin_before + cross_border_before + cross_padding_before;
|
||||
break;
|
||||
case CSS::AlignItems::End:
|
||||
case CSS::AlignItems::FlexEnd:
|
||||
cross_offset = half_line_size - inner_cross_size(box) - cross_margin_after - cross_border_after - cross_padding_after;
|
||||
break;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue