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

LibWeb: Reimplement CalculatedStyleValue as a calculation node tree

Browse source 
VALUES-4 defines the internal representation of `calc()` as a tree of
calculation nodes. ( https://www.w3.org/TR/css-values-4/#calc-internal )

VALUES-3 lacked any definition here, so we had our own ad-hoc
implementation based around the spec grammar. This commit replaces that
with CalculationNodes representing each possible node in the tree.

There are no intended functional changes, though we do now support
nested calc() which previously did not work. For example:
    `width: calc( 42 * calc(3 + 7) );`

I have added an example of this to our test page.

A couple of the layout tests that used `calc()` now return values that
are 0.5px different from before. There's no visual difference, so I
have updated the tests to use the new results.
This commit is contained in:
Sam Atkins 2023-04-11 15:48:06 +01:00 • committed by Andreas Kling
parent 5f2f780662
commit d0f80b40b2
7 changed files with 828 additions and 495 deletions
Download patch file Download diff file Expand all files Collapse all files

6
Tests/LibWeb/Layout/expected/grid/borders.txt
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 children: not-inline
BlockContainer <(anonymous)> at (8,275.34375) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (445.434356,285.34375) content-size 337.800018x17.46875 children: inline
BlockContainer <div.grid-item> at (445.934356,285.34375) content-size 337.300018x17.46875 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: [445.434356,285.34375 6.34375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [445.934356,285.34375 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <(anonymous)> at (8,275.34375) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (18,338.8125) content-size 339.034362x17.46875 children: inline
BlockContainer <div.grid-item> at (18,338.8125) content-size 338.534362x17.46875 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"

6
Tests/LibWeb/Layout/expected/grid/gap.txt
View file

@ -38,14 +38,14 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
Box <div.grid-container> at (8,52.9375) content-size 784x50.9375 children: not-inline
BlockContainer <(anonymous)> at (8,52.9375) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (435.434356,52.9375) content-size 357.800018x17.46875 children: inline
BlockContainer <div.grid-item> at (435.934356,52.9375) content-size 357.300018x17.46875 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: [435.434356,52.9375 6.34375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [435.934356,52.9375 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <(anonymous)> at (8,52.9375) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,86.40625) content-size 359.034362x17.46875 children: inline
BlockContainer <div.grid-item> at (8,86.40625) content-size 358.534362x17.46875 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,86.40625 8.8125x17.46875]
"2"