beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-25 17:10:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

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

Browse source
This commit is contained in:
Andreas Kling 2024-06-23 15:36:51 +02:00 committed by Andreas Kling
parent 9df41954c0
commit 9c02ace897
Notes: sideshowbarker 2024-07-16 20:12:13 +09:00 
Author: https://github.com/awesomekling
Commit: https://github.com/LadybirdBrowser/ladybird/commit/9c02ace897
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/258
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": [ "valid-identifiers": [
"auto", "auto",
"content" "content",
"fit-content",
"max-content",
"min-content"
], ],
"percentages-resolve-to": "length" "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. // in this calculation use fit-content as the flex item’s cross size.
// The flex base size is the item’s resulting main 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. // NOTE: If the flex item has a definite main size, just use that as the flex base size.
if (has_definite_main_size(item)) if (has_definite_main_size(item))
return inner_main_size(item); return inner_main_size(item);