LibWeb: Add coverage test for calc() usage

Ignoring the fact that we should serialize a simplified form of calc()
expressions, the following are wrong:

- grid-auto-columns
- grid-auto-rows
- grid-template-columns
- grid-template-rows
- transform-origin

Generated in part with this python script (though I've since iterated on
the output repeatedly so it's quite different):

```py
import json
properties_file = open("./Userland/Libraries/LibWeb/CSS/Properties.json")
properties = json.load(properties_file)
for (key, value) in properties.items():
    if not 'valid-types' in value:
        continue
    if 'longhands' in value:
        continue
    valid_types = value['valid-types']
    for type_string in valid_types:
        name, *suffix = type_string.split(None, 1)
        match name:
            case 'integer' | 'number':
                print(f'{key}: calc(2 * var(--n));')
            case 'angle':
                print(f'{key}: calc(2deg * var(--n));')
            case 'flex':
                print(f'{key}: calc(2fr * var(--n));')
            case 'frequency':
                print(f'{key}: calc(2hz * var(--n));')
            case 'length':
                print(f'{key}: calc(2px * var(--n));')
            case 'percentage':
                print(f'{key}: calc(2% * var(--n));')
            case 'resolution':
                print(f'{key}: calc(2x * var(--n));')
            case 'time':
                print(f'{key}: calc(2s * var(--n));')
```

Tests/LibWeb/Text/expected/css/calc-coverage.txt

@@ -0,0 +1,158 @@
+animation-delay: 'calc(2s)' -> 'calc(2s)'
+animation-delay: 'calc(2s * var(--n))' -> '4s'
+animation-duration: 'calc(2s)' -> 'calc(2s)'
+animation-duration: 'calc(2s * var(--n))' -> '4s'
+animation-iteration-count: 'calc(2)' -> 'calc(2)'
+animation-iteration-count: 'calc(2 * var(--n))' -> '4'
+background-position-x: 'calc(2px)' -> 'left calc(2px)'
+background-position-x: 'calc(2px * var(--n))' -> 'left calc(2px * 2)'
+background-position-y: 'calc(2%)' -> 'top calc(2%)'
+background-position-y: 'calc(2% * var(--n))' -> 'top 4%'
+background-size: 'calc(2px * var(--n)) calc(2%)' -> 'calc(2px * 2) 2%'
+background-size: 'calc(2px * var(--n)) calc(2% * var(--n))' -> 'calc(2px * 2) 4%'
+border-bottom-left-radius: 'calc(2px)' -> 'calc(2px)'
+border-bottom-left-radius: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+border-bottom-right-radius: 'calc(2%)' -> 'calc(2%)'
+border-bottom-right-radius: 'calc(2% * var(--n))' -> '4%'
+border-bottom-width: 'calc(2px)' -> 'calc(2px)'
+border-bottom-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+border-left-width: 'calc(2px)' -> 'calc(2px)'
+border-left-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+border-right-width: 'calc(2px)' -> 'calc(2px)'
+border-right-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+border-spacing: 'calc(2px)' -> 'calc(2px)'
+border-spacing: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+border-top-left-radius: 'calc(2px)' -> 'calc(2px)'
+border-top-left-radius: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+border-top-right-radius: 'calc(2%)' -> 'calc(2%)'
+border-top-right-radius: 'calc(2% * var(--n))' -> '4%'
+border-top-width: 'calc(2px)' -> 'calc(2px)'
+border-top-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+bottom: 'calc(2px)' -> 'calc(2px)'
+bottom: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+column-count: 'calc(2)' -> 'calc(2)'
+column-count: 'calc(2 * var(--n))' -> '4'
+column-gap: 'calc(2px)' -> 'calc(2px)'
+column-gap: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+column-width: 'calc(2px)' -> 'calc(2px)'
+column-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+counter-increment: 'foo calc(2)' -> 'foo calc(2)'
+counter-increment: 'foo calc(2 * var(--n))' -> 'foo 4'
+counter-reset: 'foo calc(2)' -> 'foo calc(2)'
+counter-reset: 'foo calc(2 * var(--n))' -> 'foo 4'
+counter-set: 'foo calc(2)' -> 'foo calc(2)'
+counter-set: 'foo calc(2 * var(--n))' -> 'foo 4'
+cx: 'calc(2px)' -> 'calc(2px)'
+cx: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+cy: 'calc(2%)' -> 'calc(2%)'
+cy: 'calc(2% * var(--n))' -> '4%'
+fill-opacity: 'calc(2)' -> 'calc(2)'
+fill-opacity: 'calc(2 * var(--n))' -> '4'
+flex-basis: 'calc(2px)' -> 'calc(2px)'
+flex-basis: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+flex-grow: 'calc(2)' -> 'calc(2)'
+flex-grow: 'calc(2 * var(--n))' -> '4'
+flex-shrink: 'calc(2)' -> 'calc(2)'
+flex-shrink: 'calc(2 * var(--n))' -> '4'
+font-feature-settings: ''test' calc(2)' -> '"test" calc(2)'
+font-feature-settings: ''test' calc(2 * var(--n))' -> '"test" 4'
+font-size: 'calc(2px)' -> '2px'
+font-size: 'calc(2px * var(--n))' -> '4px'
+font-variation-settings: ''test' calc(2)' -> '"test" calc(2)'
+font-variation-settings: ''test' calc(2 * var(--n))' -> '"test" 4'
+font-weight: 'calc(2)' -> '2'
+font-weight: 'calc(2 * var(--n))' -> '4'
+font-width: 'calc(2%)' -> 'calc(2%)'
+font-width: 'calc(2% * var(--n))' -> '4%'
+grid-auto-columns: 'calc(2fr)' -> 'auto'
+grid-auto-columns: 'calc(2fr * var(--n))' -> 'auto'
+grid-auto-rows: 'calc(2fr)' -> 'auto'
+grid-auto-rows: 'calc(2fr * var(--n))' -> 'auto'
+grid-template-columns: 'calc(2fr)' -> 'auto'
+grid-template-columns: 'calc(2fr * var(--n))' -> 'auto'
+grid-template-rows: 'calc(2fr)' -> 'auto'
+grid-template-rows: 'calc(2fr * var(--n))' -> 'auto'
+height: 'calc(2px)' -> '2px'
+height: 'calc(2px * var(--n))' -> '4px'
+left: 'calc(2px)' -> 'calc(2px)'
+left: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+letter-spacing: 'calc(2px)' -> 'calc(2px)'
+letter-spacing: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+line-height: 'calc(2)' -> '32px'
+line-height: 'calc(2 * var(--n))' -> '64px'
+margin-bottom: 'calc(2px)' -> 'calc(2px)'
+margin-bottom: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+margin-left: 'calc(2%)' -> 'calc(2%)'
+margin-left: 'calc(2% * var(--n))' -> '4%'
+margin-right: 'calc(2px)' -> 'calc(2px)'
+margin-right: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+margin-top: 'calc(2%)' -> 'calc(2%)'
+margin-top: 'calc(2% * var(--n))' -> '4%'
+math-depth: 'calc(2)' -> '2'
+math-depth: 'calc(2 * var(--n))' -> '4'
+max-height: 'calc(2px)' -> 'calc(2px)'
+max-height: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+max-width: 'calc(2%)' -> 'calc(2%)'
+max-width: 'calc(2% * var(--n))' -> '4%'
+min-height: 'calc(2px)' -> 'calc(2px)'
+min-height: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+min-width: 'calc(2%)' -> 'calc(2%)'
+min-width: 'calc(2% * var(--n))' -> '4%'
+opacity: 'calc(2)' -> 'calc(2)'
+opacity: 'calc(2 * var(--n))' -> '4'
+order: 'calc(2)' -> 'calc(2)'
+order: 'calc(2 * var(--n))' -> '4'
+outline-offset: 'calc(2px)' -> 'calc(2px)'
+outline-offset: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+outline-width: 'calc(2px)' -> 'calc(2px)'
+outline-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+padding-bottom: 'calc(2px)' -> 'calc(2px)'
+padding-bottom: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+padding-left: 'calc(2%)' -> 'calc(2%)'
+padding-left: 'calc(2% * var(--n))' -> '4%'
+padding-right: 'calc(2px)' -> 'calc(2px)'
+padding-right: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+padding-top: 'calc(2%)' -> 'calc(2%)'
+padding-top: 'calc(2% * var(--n))' -> '4%'
+r: 'calc(2px)' -> 'calc(2px)'
+r: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+right: 'calc(2%)' -> 'calc(2%)'
+right: 'calc(2% * var(--n))' -> '4%'
+row-gap: 'calc(2%)' -> 'calc(2%)'
+row-gap: 'calc(2% * var(--n))' -> '4%'
+rx: 'calc(2px)' -> 'calc(2px)'
+rx: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+ry: 'calc(2%)' -> 'calc(2%)'
+ry: 'calc(2% * var(--n))' -> '4%'
+stop-opacity: 'calc(2)' -> 'calc(2)'
+stop-opacity: 'calc(2 * var(--n))' -> '4'
+stroke-opacity: 'calc(2%)' -> 'calc(2%)'
+stroke-opacity: 'calc(2% * var(--n))' -> '4%'
+stroke-width: 'calc(2px)' -> 'calc(2px)'
+stroke-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+tab-size: 'calc(2px)' -> 'calc(2px)'
+tab-size: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+text-decoration-thickness: 'calc(2px)' -> 'calc(2px)'
+text-decoration-thickness: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+text-indent: 'calc(2%)' -> 'calc(2%)'
+text-indent: 'calc(2% * var(--n))' -> '4%'
+top: 'calc(2%)' -> 'calc(2%)'
+top: 'calc(2% * var(--n))' -> '4%'
+transform-origin: 'calc(2px) calc(2%)' -> '50% 50%'
+transform-origin: 'calc(2px * var(--n)) calc(2% * var(--n))' -> '50% 50%'
+transition-delay: 'calc(2s)' -> 'calc(2s)'
+transition-delay: 'calc(2s * var(--n))' -> '4s'
+transition-duration: 'calc(2s)' -> 'calc(2s)'
+transition-duration: 'calc(2s * var(--n))' -> '4s'
+vertical-align: 'calc(2px)' -> 'calc(2px)'
+vertical-align: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+width: 'calc(2%)' -> '15.6875px'
+width: 'calc(2% * var(--n))' -> '31.35938px'
+word-spacing: 'calc(2px)' -> 'calc(2px)'
+word-spacing: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+x: 'calc(2px)' -> 'calc(2px)'
+x: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
+y: 'calc(2%)' -> 'calc(2%)'
+y: 'calc(2% * var(--n))' -> '4%'
+z-index: 'calc(2)' -> 'calc(2)'
+z-index: 'calc(2 * var(--n))' -> '4'

Tests/LibWeb/Text/input/css/calc-coverage.html

@@ -0,0 +1,337 @@
+<!DOCTYPE html>
+<style>
+    :root {
+        --n: 2;
+    }
+</style>
+<script src="../include.js"></script>
+<div id="target">Well, hello friends</div>
+<script>
+    test(() => {
+        let properties = {
+        "animation-delay": [
+            "calc(2s)",
+            "calc(2s * var(--n))",
+        ],
+        "animation-duration": [
+            "calc(2s)",
+            "calc(2s * var(--n))",
+        ],
+        "animation-iteration-count": [
+            "calc(2)",
+            "calc(2 * var(--n))",
+        ],
+        "background-position-x": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "background-position-y": [
+            "calc(2%)",
+            "calc(2% * var(--n))",
+        ],
+        "background-size": [
+            "calc(2px * var(--n)) calc(2%)",
+            "calc(2px * var(--n)) calc(2% * var(--n))",
+        ],
+        "border-bottom-left-radius": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "border-bottom-right-radius": [
+            "calc(2%)",
+            "calc(2% * var(--n))",
+        ],
+        "border-bottom-width": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "border-left-width": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "border-right-width": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "border-spacing": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "border-top-left-radius": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "border-top-right-radius": [
+            "calc(2%)",
+            "calc(2% * var(--n))",
+        ],
+        "border-top-width": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "bottom": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "column-count": [
+            "calc(2)",
+            "calc(2 * var(--n))",
+        ],
+        "column-gap": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "column-width": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "counter-increment": [
+            "foo calc(2)",
+            "foo calc(2 * var(--n))",
+        ],
+        "counter-reset": [
+            "foo calc(2)",
+            "foo calc(2 * var(--n))",
+        ],
+        "counter-set": [
+            "foo calc(2)",
+            "foo calc(2 * var(--n))",
+        ],
+        "cx": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "cy": [
+            "calc(2%)",
+            "calc(2% * var(--n))",
+        ],
+        "fill-opacity": [
+            "calc(2)",
+            "calc(2 * var(--n))",
+        ],
+        "flex-basis": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "flex-grow": [
+            "calc(2)",
+            "calc(2 * var(--n))",
+        ],
+        "flex-shrink": [
+            "calc(2)",
+            "calc(2 * var(--n))",
+        ],
+        "font-feature-settings": [
+            "'test' calc(2)",
+            "'test' calc(2 * var(--n))",
+        ],
+        "font-size": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "font-variation-settings": [
+            "'test' calc(2)",
+            "'test' calc(2 * var(--n))",
+        ],
+        "font-weight": [
+            "calc(2)",
+            "calc(2 * var(--n))",
+        ],
+        "font-width": [
+            "calc(2%)",
+            "calc(2% * var(--n))",
+        ],
+        "grid-auto-columns": [
+            "calc(2fr)",
+            "calc(2fr * var(--n))",
+        ],
+        "grid-auto-rows": [
+            "calc(2fr)",
+            "calc(2fr * var(--n))",
+        ],
+        "grid-template-columns": [
+            "calc(2fr)",
+            "calc(2fr * var(--n))",
+        ],
+        "grid-template-rows": [
+            "calc(2fr)",
+            "calc(2fr * var(--n))",
+        ],
+        "height": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "left": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "letter-spacing": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "line-height": [
+            "calc(2)",
+            "calc(2 * var(--n))",
+        ],
+        "margin-bottom": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "margin-left": [
+            "calc(2%)",
+            "calc(2% * var(--n))",
+        ],
+        "margin-right": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "margin-top": [
+            "calc(2%)",
+            "calc(2% * var(--n))",
+        ],
+        "math-depth": [
+            "calc(2)",
+            "calc(2 * var(--n))",
+        ],
+        "max-height": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "max-width": [
+            "calc(2%)",
+            "calc(2% * var(--n))",
+        ],
+        "min-height": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "min-width": [
+            "calc(2%)",
+            "calc(2% * var(--n))",
+        ],
+        "opacity": [
+            "calc(2)",
+            "calc(2 * var(--n))",
+        ],
+        "order": [
+            "calc(2)",
+            "calc(2 * var(--n))",
+        ],
+        "outline-offset": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "outline-width": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "padding-bottom": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "padding-left": [
+            "calc(2%)",
+            "calc(2% * var(--n))",
+        ],
+        "padding-right": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "padding-top": [
+            "calc(2%)",
+            "calc(2% * var(--n))",
+        ],
+        "r": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "right": [
+            "calc(2%)",
+            "calc(2% * var(--n))",
+        ],
+        "row-gap": [
+            "calc(2%)",
+            "calc(2% * var(--n))",
+        ],
+        "rx": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "ry": [
+            "calc(2%)",
+            "calc(2% * var(--n))",
+        ],
+        "stop-opacity": [
+            "calc(2)",
+            "calc(2 * var(--n))",
+        ],
+        "stroke-opacity": [
+            "calc(2%)",
+            "calc(2% * var(--n))",
+        ],
+        "stroke-width": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "tab-size": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "text-decoration-thickness": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "text-indent": [
+            "calc(2%)",
+            "calc(2% * var(--n))",
+        ],
+        "top": [
+            "calc(2%)",
+            "calc(2% * var(--n))",
+        ],
+        "transform-origin": [
+            "calc(2px) calc(2%)",
+            "calc(2px * var(--n)) calc(2% * var(--n))",
+        ],
+        "transition-delay": [
+            "calc(2s)",
+            "calc(2s * var(--n))",
+        ],
+        "transition-duration": [
+            "calc(2s)",
+            "calc(2s * var(--n))",
+        ],
+        "vertical-align": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "width": [
+            "calc(2%)",
+            "calc(2% * var(--n))",
+        ],
+        "word-spacing": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "x": [
+            "calc(2px)",
+            "calc(2px * var(--n))",
+        ],
+        "y": [
+            "calc(2%)",
+            "calc(2% * var(--n))",
+        ],
+        "z-index": [
+            "calc(2)",
+            "calc(2 * var(--n))",
+        ],
+        };
+        let target = document.getElementById("target");
+        for (let [property, values] of Object.entries(properties)) {
+            for (let value of values) {
+                target.setAttribute("style", `${property}: ${value}`);
+                println(`${property}: '${value}' -> '${getComputedStyle(target)[property]}'`);
+            }
+        }
+    });
+</script>