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

LibWeb: Do not compensate padding for abspos boxes with static position

Browse source 
When a box does not have a top, left, bottom, or right, there is no
need to adjust the offset for positioning relative to the padding edge,
because the box remains in the normal flow.
This commit is contained in:
Aliaksandr Kalenik 2023-11-15 13:32:16 +01:00 • committed by Andreas Kling
parent 2c1bbf5a99
commit 4164af2ca4
9 changed files with 128 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

11
Tests/LibWeb/Layout/expected/block-and-inline/abspos-only-with-inset-left.txt Normal file
View file

@ -0,0 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x330 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x312 children: not-inline
BlockContainer <div.box> at (31,21) content-size 200x200 positioned children: not-inline
BlockContainer <div.inner> at (12,22) content-size 100x100 positioned [BFC] children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x332]
PaintableWithLines (BlockContainer<BODY>) [9,9 782x314]
PaintableWithLines (BlockContainer<DIV>.box) [10,10 272x312]
PaintableWithLines (BlockContainer<DIV>.inner) [11,21 102x102]

11
Tests/LibWeb/Layout/expected/block-and-inline/abspos-with-bottom-right-insets-relative-to-box-with-paddings.txt Normal file
View file

@ -0,0 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x330 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x312 children: not-inline
BlockContainer <div.box> at (31,21) content-size 200x200 positioned children: not-inline
BlockContainer <div.inner> at (180,220) content-size 100x100 positioned [BFC] children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x332]
PaintableWithLines (BlockContainer<BODY>) [9,9 782x314]
PaintableWithLines (BlockContainer<DIV>.box) [10,10 272x312]
PaintableWithLines (BlockContainer<DIV>.inner) [179,219 102x102]

11
Tests/LibWeb/Layout/expected/block-and-inline/abspos-without-insets-relative-top-box-with-padding-top.txt Normal file
View file

@ -0,0 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x66 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x50 children: not-inline
BlockContainer <div.box> at (8,58) content-size 784x0 positioned children: not-inline
BlockContainer <div.inner> at (8,58) content-size 784x50 positioned [BFC] children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x66] overflow: [0,0 800x108]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x50] overflow: [8,8 784x100]
PaintableWithLines (BlockContainer<DIV>.box) [8,8 784x50] overflow: [8,8 784x100]
PaintableWithLines (BlockContainer<DIV>.inner) [8,58 784x50]

11
Tests/LibWeb/Layout/expected/block-and-inline/abspos-without-insets.txt Normal file
View file

@ -0,0 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x330 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x312 children: not-inline
BlockContainer <div.box> at (31,21) content-size 200x200 positioned children: not-inline
BlockContainer <div.inner> at (32,22) content-size 100x100 positioned [BFC] children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x332]
PaintableWithLines (BlockContainer<BODY>) [9,9 782x314]
PaintableWithLines (BlockContainer<DIV>.box) [10,10 272x312]
PaintableWithLines (BlockContainer<DIV>.inner) [31,21 102x102]

21
Tests/LibWeb/Layout/input/block-and-inline/abspos-only-with-inset-left.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html><style>
* {
border: 1px solid black;
}
.box {
position: relative;
padding: 10px 50px 100px 20px;
background-color: mediumseagreen;
width: 200px;
height: 200px;
}
.inner {
position: absolute;
left: 0;
width : 100px;
height: 100px;
background-color: magenta;
}
</style><div class="box"><div class="inner"></div></div>

22
Tests/LibWeb/Layout/input/block-and-inline/abspos-with-bottom-right-insets-relative-to-box-with-paddings.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html><style>
* {
border: 1px solid black;
}
.box {
position: relative;
padding: 10px 50px 100px 20px;
background-color: mediumseagreen;
width: 200px;
height: 200px;
}
.inner {
position: absolute;
width : 100px;
height: 100px;
bottom: 0;
right: 0;
background-color: magenta;
}
</style><div class="box"><div class="inner"></div></div>

15
Tests/LibWeb/Layout/input/block-and-inline/abspos-without-insets-relative-top-box-with-padding-top.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<style>
.box {
position: relative;
padding-top: 50px;
}
.inner {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #FDDE5C 0%, #F8AB5E 16.66667%, #F56A62 33.33333%, #A176C8 50%, #759BEB 66.66667%, #65BEB3 83.33333%, #70DB96);
}
</style><div class="box"><div class="inner"></div></div>

20
Tests/LibWeb/Layout/input/block-and-inline/abspos-without-insets.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html><style>
* {
border: 1px solid black;
}
.box {
position: relative;
padding: 10px 50px 100px 20px;
background-color: mediumseagreen;
width: 200px;
height: 200px;
}
.inner {
position: absolute;
width : 100px;
height: 100px;
background-color: magenta;
}
</style><div class="box"><div class="inner"></div></div>