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

LibWeb: Use correct reference for abspos elements with % height sizes

Browse source 
Absolutely positioned elements should have their percentage sizes
resolved against the padding box of the containing block, not the
content box.

From CSS-POSITION-3 <https://www.w3.org/TR/css-position-3/#def-cb>

"..the containing block is formed by the padding edge of the ancestor.."
This commit is contained in:
Andreas Kling 2023-06-17 20:06:41 +02:00
parent 357174d8fd
commit c374541711
3 changed files with 20 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Tests/LibWeb/Layout/expected/block-and-inline/abspos-with-percentage-height-resolved-against-padding-box-of-containing-block.txt Normal file
View file

@ -0,0 +1,4 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x256 [BFC] children: not-inline
BlockContainer <body> at (8,248) content-size 784x0 positioned children: not-inline
BlockContainer <div.abspos> at (8,8) content-size 784x240 positioned [BFC] children: not-inline

14
Tests/LibWeb/Layout/input/block-and-inline/abspos-with-percentage-height-resolved-against-padding-box-of-containing-block.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html><style>
body {
position: relative;
padding-top: 30%;
}
.abspos {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: orange;
}
</style><body><div class="abspos">