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

LibWeb: Support start and end alignment values in flex layout

Browse source 
These should just behave the same as `flex-start` and `flex-end`.
This commit is contained in:
Andreas Kling 2023-06-06 16:54:46 +02:00
parent abd6380cce
commit 9e807d7c6a
4 changed files with 69 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

31
Tests/LibWeb/Layout/expected/flex/align-keywords-start-and-end.txt Normal file
View file

@ -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>

28
Tests/LibWeb/Layout/input/flex/align-keywords-start-and-end.html Normal file
View file

@ -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>