system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-09 10:20:45 +00:00
Code Issues Projects Releases Wiki Activity

LibWeb: Allow flex-basis: {min,max,fit}-content

Browse Source 
(cherry picked from commit 9c02ace89785cbc185553dc2711f79c4ad1bf389)
This commit is contained in:
Andreas Kling 2024-06-23 15:36:51 +02:00 committed by Nico Weber
parent ef7d593463
commit 47d7a3648e
4 changed files with 61 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
Tests/LibWeb/Layout/expected/flex/flex-basis-intrinsic-sizing-keywords.txt Normal file
View File

@ -0,0 +1,39 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x67 [BFC] children: not-inline
Box <body> at (8,8) content-size 784x51 flex-container(row) [FFC] children: not-inline
BlockContainer <div.min-content> at (8,8) content-size 27.640625x51 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [8,8 27.15625x17] baseline: 13.296875
"foo"
frag 1 from TextNode start: 4, length: 3, rect: [8,25 27.640625x17] baseline: 13.296875
"bar"
frag 2 from TextNode start: 8, length: 3, rect: [8,42 27.203125x17] baseline: 13.296875
"baz"
TextNode <#text>
BlockContainer <div.max-content> at (35.640625,8) content-size 98x51 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 11, rect: [35.640625,8 98x17] baseline: 13.296875
"foo bar baz"
TextNode <#text>
BlockContainer <div.fit-content> at (133.640625,8) content-size 98x51 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 11, rect: [133.640625,8 98x17] baseline: 13.296875
"foo bar baz"
TextNode <#text>
BlockContainer <div.auto> at (231.640625,8) content-size 0x51 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [231.640625,8 27.15625x17] baseline: 13.296875
"foo"
frag 1 from TextNode start: 4, length: 3, rect: [231.640625,25 27.640625x17] baseline: 13.296875
"bar"
frag 2 from TextNode start: 8, length: 3, rect: [231.640625,42 27.203125x17] baseline: 13.296875
"baz"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x67]
PaintableBox (Box<BODY>) [8,8 784x51]
PaintableWithLines (BlockContainer<DIV>.min-content) [8,8 27.640625x51]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.max-content) [35.640625,8 98x51]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.fit-content) [133.640625,8 98x51]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.auto) [231.640625,8 0x51] overflow: [231.640625,8 27.640625x51]
TextPaintable (TextNode<#text>)

9
Tests/LibWeb/Layout/input/flex/flex-basis-intrinsic-sizing-keywords.html Normal file
View File

@ -0,0 +1,9 @@
<!doctype html><style>
* { outline: 1px solid black; }
body { display: flex; }
div { width: 0px; }
.min-content { flex-basis: min-content; }
.max-content { flex-basis: max-content; }
.fit-content { flex-basis: fit-content; }
.auto { flex-basis: auto; }
</style><body><div class="min-content">foo bar baz</div><div class="max-content">foo bar baz</div><div class="fit-content">foo bar baz</div><div class="auto">foo bar baz</div>

5
Userland/Libraries/LibWeb/CSS/Properties.json
View File

@ -889,7 +889,10 @@
],
"valid-identifiers": [
"auto",
"content"
"content",
"fit-content",
"max-content",
"min-content"
],
"percentages-resolve-to": "length"
},

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

@ -603,6 +603,15 @@ void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(
// in this calculation use fit-content as the flex item’s cross size.
// The flex base size is the item’s resulting main size.
if (auto* size = item.used_flex_basis->get_pointer<CSS::Size>()) {
if (size->is_fit_content())
return calculate_fit_content_main_size(item);
if (size->is_max_content())
return calculate_max_content_main_size(item);
if (size->is_min_content())
return calculate_min_content_main_size(item);
}
// NOTE: If the flex item has a definite main size, just use that as the flex base size.
if (has_definite_main_size(item))
return inner_main_size(item);