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

LibWeb: Consider margins of atomic inlines in layout

Browse source 
According to CSS Inline Layout Module Level 3 § 2.2 Step 1. atomic
inlines should be layed out in a line box based on their margin box.

However, up until this patch we were unconditionally considering only
the border box during line box height calculation. This made us
essentially drop all vertical margins for atomic inlines.
This commit is contained in:
Mathis Wiehl 2023-03-14 10:28:01 +01:00 • committed by Andreas Kling
parent 0aa4466ce9
commit b96920a9d6
11 changed files with 98 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

12
Tests/LibWeb/Layout/expected/inline-box-with-vertical-margins-vertical-align-top.txt Normal file
View file

@ -0,0 +1,12 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x191 children: not-inline
BlockContainer <body> at (8,8) content-size 784x175 children: inline
line 0 width: 210.828125, height: 175, bottom: 175, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [8,8 43.125x17.46875]
"Well, "
frag 1 from BlockContainer start: 0, length: 0, rect: [51,58 100x100]
frag 2 from TextNode start: 0, length: 9, rect: [151,8 67.703125x17.46875]
" friends."
TextNode <#text>
BlockContainer <div#inline-box> at (51,58) content-size 100x100 inline-block children: not-inline
TextNode <#text>

12
Tests/LibWeb/Layout/expected/inline-box-with-vertical-margins.txt Normal file
View file

@ -0,0 +1,12 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x194.46875 children: not-inline
BlockContainer <body> at (8,8) content-size 784x178.46875 children: inline
line 0 width: 210.828125, height: 178.46875, bottom: 178.46875, baseline: 175
frag 0 from TextNode start: 0, length: 6, rect: [8,169 43.125x17.46875]
"Well, "
frag 1 from BlockContainer start: 0, length: 0, rect: [51,58 100x100]
frag 2 from TextNode start: 0, length: 9, rect: [151,169 67.703125x17.46875]
" friends."
TextNode <#text>
BlockContainer <div#inline-box> at (51,58) content-size 100x100 inline-block children: not-inline
TextNode <#text>

12
Tests/LibWeb/Layout/expected/replaced-box-with-vertical-margins.txt Normal file
View file

@ -0,0 +1,12 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x232.46875 children: not-inline
BlockContainer <body> at (8,8) content-size 784x216.46875 children: inline
line 0 width: 174.828125, height: 216.46875, bottom: 216.46875, baseline: 213
frag 0 from TextNode start: 0, length: 6, rect: [8,207 43.125x17.46875]
"Well, "
frag 1 from ImageBox start: 0, length: 0, rect: [51,33 64x138]
frag 2 from TextNode start: 0, length: 9, rect: [115,207 67.703125x17.46875]
" friends."
TextNode <#text>
ImageBox <img#image> at (51,33) content-size 64x138 children: not-inline
TextNode <#text>

BIN
Tests/LibWeb/Layout/input/buggie.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.8 KiB

16
Tests/LibWeb/Layout/input/inline-box-with-vertical-margins-vertical-align-top.html Normal file
View file

@ -0,0 +1,16 @@
<style>
body {
font-family: 'SerenitySans';
}
#inline-box {
background-color: red;
margin-top: 50px;
margin-bottom: 25px;
width: 100px;
height: 100px;
display: inline-block;
vertical-align: top;
}
</style>Well, <div id="inline-box"></div> friends.

15
Tests/LibWeb/Layout/input/inline-box-with-vertical-margins.html Normal file
View file

@ -0,0 +1,15 @@
<style>
body {
font-family: 'SerenitySans';
}
#inline-box {
background-color: red;
margin-top: 50px;
margin-bottom: 25px;
width: 100px;
height: 100px;
display: inline-block;
}
</style>Well, <div id="inline-box"></div> friends.

10
Tests/LibWeb/Layout/input/replaced-box-with-vertical-margins.html Normal file
View file

@ -0,0 +1,10 @@
<style>
body {
font-family: 'SerenitySans';
}
#image {
margin-top: 25px;
margin-bottom: 50px;
}
</style>Well, <img id="image" src="buggie.png" /> friends.