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

LibWeb: Take box-sizing into account when sizing replaced elements

Browse source 
This fixes an issue where images with padding and/or border did not have
their size adjusted for `border-box`, thereby becoming larger than
intended by the author.
This commit is contained in:
Andreas Kling 2023-06-04 16:01:30 +02:00
parent 9531abcb1a
commit c197fb4037
3 changed files with 24 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

9
Tests/LibWeb/Layout/expected/img-with-box-sizing-border-box-and-padding.txt Normal file
View file

@ -0,0 +1,9 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x116 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x100 children: inline
line 0 width: 200, height: 100, bottom: 100, baseline: 100
frag 0 from ImageBox start: 0, length: 0, rect: [29,29 58x58]
frag 1 from ImageBox start: 0, length: 0, rect: [129,29 58x58]
ImageBox <img.with-height> at (29,29) content-size 58x58 children: not-inline
ImageBox <img.with-width> at (129,29) content-size 58x58 children: not-inline
TextNode <#text>

13
Tests/LibWeb/Layout/input/img-with-box-sizing-border-box-and-padding.html Normal file
View file

@ -0,0 +1,13 @@
<!doctype html><style>
img {
padding: 20px;
box-sizing: border-box;
border: 1px solid black;
}
.with-height {
height: 100px;
}
.with-width {
width: 100px;
}
</style><img class="with-height" src="120.png"><img class="with-width" src="120.png">