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

LibWeb: Forbid using CSS::Length as reference value in resolved()

Browse source 
CSSPixels should not be wrapped into CSS::Length before being passed
to resolved() to end up resolving percentages without losing
precision.

Fixes thrashing layout when 33.3333% width is used together with
"box-sizing: border-box".
This commit is contained in:
Aliaksandr Kalenik 2024-01-07 01:09:09 +01:00 • committed by Andreas Kling
parent f2cd120fd3
commit 4bc38300ad
10 changed files with 40 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

13
Tests/LibWeb/Layout/expected/flex/columns-33-percent-width.txt Normal file
View file

@ -0,0 +1,13 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x116 [BFC] children: not-inline
Box <body> at (8,8) content-size 500x100 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (8,8) content-size 166.65625x100 flex-item [BFC] children: not-inline
BlockContainer <div> at (174.65625,8) content-size 166.65625x100 flex-item [BFC] children: not-inline
BlockContainer <div> at (341.3125,8) content-size 166.65625x100 flex-item [BFC] children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x116]
PaintableBox (Box<BODY>) [8,8 500x100]
PaintableWithLines (BlockContainer<DIV>) [8,8 166.65625x100]
PaintableWithLines (BlockContainer<DIV>) [174.65625,8 166.65625x100]
PaintableWithLines (BlockContainer<DIV>) [341.3125,8 166.65625x100]

4
Tests/LibWeb/Layout/expected/grid/grid-item-percentage-margins.txt
View file

@ -3,9 +3,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
BlockContainer <div> at (8,8) content-size 784x17.46875 children: not-inline
Box <div.grid> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
BlockContainer <div.item> at (243.203125,8) content-size 313.59375x17.46875 [BFC] children: inline
BlockContainer <div.item> at (243.1875,8) content-size 313.625x17.46875 [BFC] children: inline
line 0 width: 121.0625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 16, rect: [243.203125,8 121.0625x17.46875]
frag 0 from TextNode start: 0, length: 16, rect: [243.1875,8 121.0625x17.46875]
"A filthy t-shirt"
TextNode <#text>

16
Tests/LibWeb/Layout/input/flex/columns-33-percent-width.html Normal file
View file

@ -0,0 +1,16 @@
<!doctype html><style>
* {
box-sizing: border-box;
}
body {
display: flex;
flex-wrap: wrap;
background: black;
width: 500px;
}
div {
flex-basis: 33.3333%;
height: 100px;
background: magenta;
}
</style><body><div></div><div></div><div></div>

BIN
Tests/LibWeb/Ref/reference/images/css-gradients-ref.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 350 KiB

After

Width:  |  Height:  |  Size: 541 KiB

Before After
Before After

4
Tests/LibWeb/Text/expected/css/getComputedStyle-transform.txt
View file

@ -1,8 +1,8 @@
none => none
matrix(1, 2, 3, 4, 5, 6) => matrix(1, 2, 3, 4, 5, 6)
matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16) => matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16)
translate(1%, 2px) => matrix(1, 0, 0, 1, 7.84375, 2)
translate3d(1%, 2px, 3em) => matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7.84375, 2, 48, 1)
translate(1%, 2px) => matrix(1, 0, 0, 1, 7.828125, 2)
translate3d(1%, 2px, 3em) => matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7.828125, 2, 48, 1)
translateX(1px) => matrix(1, 0, 0, 1, 1, 0)
translateY(1%) => matrix(1, 0, 0, 1, 0, 0)
scale(1, 2) => matrix(1, 0, 0, 2, 0, 0)