1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 13:17:44 +00:00

LibWeb: Make CSSPixels and Length use 64-bit (double) floating point

This fixes a plethora of rounding problems on many websites.
In the future, we may want to replace this with fixed-point arithmetic
(bug #18566) for performance (and consistency with other engines),
but in the meantime this makes the web look a bit better. :^)

There's a lot more things that could be converted to doubles, which
would reduce the amount of casting necessary in this patch.
We can do that incrementally, however.
This commit is contained in:
Andreas Kling 2023-05-24 10:50:57 +02:00
parent 30262d7023
commit 655d9d1462
80 changed files with 298 additions and 299 deletions

View file

@ -4,23 +4,23 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
Box <div.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,8) content-size 261.333343x17.46875 [BFC] children: inline
BlockContainer <div.grid-item> at (8,8) content-size 261.333333x17.46875 [BFC] children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (269.333343,8) content-size 261.333343x17.46875 [BFC] children: inline
BlockContainer <div.grid-item> at (269.333333,8) content-size 261.333333x17.46875 [BFC] children: inline
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [269.333343,8 8.8125x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [269.333333,8 8.8125x17.46875]
"2"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (530.666687,8) content-size 261.333343x17.46875 [BFC] children: inline
BlockContainer <div.grid-item> at (530.666666,8) content-size 261.333333x17.46875 [BFC] children: inline
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [530.666687,8 9.09375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [530.666666,8 9.09375x17.46875]
"3"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline

View file

@ -4,23 +4,23 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
Box <div.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,8) content-size 261.333343x17.46875 [BFC] children: inline
BlockContainer <div.grid-item> at (8,8) content-size 261.333333x17.46875 [BFC] children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (269.333343,8) content-size 261.333343x17.46875 [BFC] children: inline
BlockContainer <div.grid-item> at (269.333333,8) content-size 261.333333x17.46875 [BFC] children: inline
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [269.333343,8 8.8125x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [269.333333,8 8.8125x17.46875]
"2"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (530.666687,8) content-size 261.333343x17.46875 [BFC] children: inline
BlockContainer <div.grid-item> at (530.666666,8) content-size 261.333333x17.46875 [BFC] children: inline
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [530.666687,8 9.09375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [530.666666,8 9.09375x17.46875]
"3"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline

View file

@ -103,14 +103,14 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
Box <div.grid-container> at (8,275.34375) content-size 784x90.9375 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,275.34375) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (444.199981,285.34375) content-size 337.799987x17.46875 [BFC] children: inline
BlockContainer <div.grid-item> at (444.199997,285.34375) content-size 337.800002x17.46875 [BFC] children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [444.199981,285.34375 6.34375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [444.199997,285.34375 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <(anonymous)> at (8,275.34375) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (18,338.8125) content-size 337.799987x17.46875 [BFC] children: inline
BlockContainer <div.grid-item> at (18,338.8125) content-size 337.800002x17.46875 [BFC] children: inline
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [18,338.8125 8.8125x17.46875]
"2"

View file

@ -2,12 +2,12 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x50.9375 children: not-inline
Box <div.container> at (8,8) content-size 784x50.9375 [GFC] children: not-inline
BlockContainer <div.item> at (434.199981,8) content-size 357.799987x17.46875 [BFC] children: inline
BlockContainer <div.item> at (434.199997,8) content-size 357.800002x17.46875 [BFC] children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [434.199981,8 6.34375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [434.199997,8 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <div.item> at (8,41.46875) content-size 357.799987x17.46875 [BFC] children: inline
BlockContainer <div.item> at (8,41.46875) content-size 357.800002x17.46875 [BFC] children: inline
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [8,41.46875 8.8125x17.46875]
"2"

View file

@ -2,12 +2,12 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
Box <div.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
BlockContainer <div.first> at (8,8) content-size 313.599975x17.46875 [BFC] children: inline
BlockContainer <div.first> at (8,8) content-size 313.599981x17.46875 [BFC] children: inline
line 0 width: 42.140625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [8,8 42.140625x17.46875]
"First"
TextNode <#text>
BlockContainer <div.second> at (400,8) content-size 78.399993x17.46875 [BFC] children: inline
BlockContainer <div.second> at (400,8) content-size 78.399995x17.46875 [BFC] children: inline
line 0 width: 57.40625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [400,8 57.40625x17.46875]
"Second"

View file

@ -1,14 +1,14 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x24.000022 children: not-inline
Box <div.grid-container> at (8,8) content-size 784x24.000022 [GFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x24 children: not-inline
Box <div.grid-container> at (8,8) content-size 784x23.999999 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.wrapper> at (8,8) content-size 64.000061x24.000022 [BFC] children: inline
line 0 width: 64.000061, height: 24.000022, bottom: 24.000022, baseline: 24.000022
frag 0 from ImageBox start: 0, length: 0, rect: [8,8 64.000061x24.000022]
BlockContainer <div.wrapper> at (8,8) content-size 64x23.999999 [BFC] children: inline
line 0 width: 64, height: 23.999999, bottom: 23.999999, baseline: 23.999999
frag 0 from ImageBox start: 0, length: 0, rect: [8,8 64x23.999999]
TextNode <#text>
ImageBox <img> at (8,8) content-size 64.000061x24.000022 children: not-inline
ImageBox <img> at (8,8) content-size 64x23.999999 children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>

View file

@ -7,12 +7,12 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <div.item-left> at (8,8) content-size 100x35.40625 [BFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.item-right> at (108.000061,8) content-size 683.999938x35.40625 [BFC] children: inline
BlockContainer <div.item-right> at (108,8) content-size 683.999999x35.40625 [BFC] children: inline
line 0 width: 625.953125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 77, rect: [108.000061,8 625.953125x17.46875]
frag 0 from TextNode start: 0, length: 77, rect: [108,8 625.953125x17.46875]
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis venenatis"
line 1 width: 304.0625, height: 17.9375, bottom: 35.40625, baseline: 13.53125
frag 0 from TextNode start: 78, length: 39, rect: [108.000061,25 304.0625x17.46875]
frag 0 from TextNode start: 78, length: 39, rect: [108,25 304.0625x17.46875]
"purus, eget blandit velit venenatis at."
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline

View file

@ -25,30 +25,30 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
Box <div.grid-container> at (8,25.46875) content-size 784x75 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,25.46875) content-size 261.333343x75 [BFC] children: inline
BlockContainer <div.grid-item> at (8,25.46875) content-size 261.333333x75 [BFC] children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [8,25.46875 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (530.666687,25.46875) content-size 261.333343x50 [BFC] children: inline
BlockContainer <div.grid-item> at (530.666666,25.46875) content-size 261.333333x50 [BFC] children: inline
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [530.666687,25.46875 8.8125x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [530.666666,25.46875 8.8125x17.46875]
"2"
TextNode <#text>
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (269.333343,25.46875) content-size 261.333343x25 [BFC] children: inline
BlockContainer <div.grid-item> at (269.333333,25.46875) content-size 261.333333x25 [BFC] children: inline
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [269.333343,25.46875 9.09375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [269.333333,25.46875 9.09375x17.46875]
"3"
TextNode <#text>
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (269.333343,75.46875) content-size 522.666687x25 [BFC] children: inline
BlockContainer <div.grid-item> at (269.333333,75.46875) content-size 522.666666x25 [BFC] children: inline
line 0 width: 7.75, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [269.333343,75.46875 7.75x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [269.333333,75.46875 7.75x17.46875]
"4"
TextNode <#text>
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline

View file

@ -4,16 +4,16 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
Box <div.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,8) content-size 522.666687x17.46875 [BFC] children: inline
BlockContainer <div.grid-item> at (8,8) content-size 522.666666x17.46875 [BFC] children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (530.666687,8) content-size 261.333343x17.46875 [BFC] children: inline
BlockContainer <div.grid-item> at (530.666666,8) content-size 261.333333x17.46875 [BFC] children: inline
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [530.666687,8 8.8125x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [530.666666,8 8.8125x17.46875]
"2"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
@ -25,16 +25,16 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
Box <div.grid-container> at (8,25.46875) content-size 784x17.46875 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,25.46875) content-size 261.333343x17.46875 [BFC] children: inline
BlockContainer <div.grid-item> at (8,25.46875) content-size 261.333333x17.46875 [BFC] children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [8,25.46875 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (269.333343,25.46875) content-size 522.666687x17.46875 [BFC] children: inline
BlockContainer <div.grid-item> at (269.333333,25.46875) content-size 522.666666x17.46875 [BFC] children: inline
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [269.333343,25.46875 8.8125x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [269.333333,25.46875 8.8125x17.46875]
"2"
TextNode <#text>
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline

View file

@ -2,13 +2,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> 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-left> at (8,8) content-size 261.333343x17.46875 [BFC] children: inline
BlockContainer <div.item-left> at (8,8) content-size 261.333333x17.46875 [BFC] children: inline
line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [8,8 21.609375x17.46875]
"1fr"
TextNode <#text>
BlockContainer <div.item-right> at (530.666687,8) content-size 261.333343x17.46875 [BFC] children: inline
BlockContainer <div.item-right> at (530.666666,8) content-size 261.333333x17.46875 [BFC] children: inline
line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [530.666687,8 21.609375x17.46875]
frag 0 from TextNode start: 0, length: 3, rect: [530.666666,8 21.609375x17.46875]
"1fr"
TextNode <#text>