RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 19:07:35 +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

5
Base/res/html/misc/calc.html
View file

@ -34,6 +34,11 @@
<div class="box" style="width: calc(100px + 30% - (120px / (2*4 + 3 )));"></div>
</div>
<p>calc(100px + 30% - calc(120px / calc(2*4 + 3 )))</p>
<div class="container">
<div class="box" style="width: calc(100px + 30% - calc(120px / calc(2*4 + 3 )));"></div>
</div>
<p>calc(50% + 60px)</p>
<div class="container">
<div class="box" style="width: calc(50% + 60px);"></div>