RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 08:57:47 +00:00
Code Issues Activity Actions

LibWeb: Support flex-basis: calc(...)

Browse source 
1. Propagate calc() values from StyleProperties to ComputedValues.
2. Actually resolve calc() values when determining the used flex basis.

This makes the "support" section on https://shopify.com/ show up
correctly as a 2x2 grid (instead of 1x4). :^)
This commit is contained in:
Andreas Kling 2023-05-16 16:59:47 +02:00
parent e81d4ca1ac
commit 2e13f65ff4
4 changed files with 59 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

24
Tests/LibWeb/Layout/expected/flex/calc-flex-basis.txt Normal file
View file

@ -0,0 +1,24 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x80 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x62 children: not-inline
Box <div.flex-container> at (11,11) content-size 778x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div.flex-item> at (12,12) content-size 386x28 flex-item [BFC] children: inline
line 0 width: 58.398437, height: 21.835937, bottom: 21.835937, baseline: 16.914062
frag 0 from TextNode start: 0, length: 6, rect: [12,12 58.398437x21.835937]
"Item 1"
TextNode <#text>
BlockContainer <div.flex-item> at (401,12) content-size 386x28 flex-item [BFC] children: inline
line 0 width: 61.484375, height: 21.835937, bottom: 21.835937, baseline: 16.914062
frag 0 from TextNode start: 0, length: 6, rect: [401,12 61.484375x21.835937]
"Item 2"
TextNode <#text>
BlockContainer <div.flex-item> at (12,42) content-size 386x28 flex-item [BFC] children: inline
line 0 width: 61.835937, height: 21.835937, bottom: 21.835937, baseline: 16.914062
frag 0 from TextNode start: 0, length: 6, rect: [12,42 61.835937x21.835937]
"Item 3"
TextNode <#text>
BlockContainer <div.flex-item> at (401,42) content-size 386x28 flex-item [BFC] children: inline
line 0 width: 60.15625, height: 21.835937, bottom: 21.835937, baseline: 16.914062
frag 0 from TextNode start: 0, length: 6, rect: [401,42 60.15625x21.835937]
"Item 4"
TextNode <#text>

18
Tests/LibWeb/Layout/input/flex/calc-flex-basis.html Normal file
View file

@ -0,0 +1,18 @@
<!doctype html><style>
* {
border: 1px solid black;
box-sizing: border-box;
font: 20px SerenitySans;
}
.flex-container {
display: flex;
flex-wrap: wrap;
background: pink;
column-gap: 1px;
}
.flex-item {
flex-basis: calc(50% - 1px);
background: orange;
height: 30px;
}
</style><div class="flex-container"><div class="flex-item">Item 1</div><div class="flex-item">Item 2</div><div class="flex-item">Item 3</div><div class="flex-item">Item 4</div></div>