beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-22 07:30:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

LibWeb: Add coverage test for calc() usage

Browse source 
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));')
```
This commit is contained in:
Sam Atkins 2024-10-14 11:41:34 +01:00 committed by Andreas Kling
parent 7c2680b7ef
commit 301502a3a1
Notes: github-actions[bot] 2024-10-16 06:35:00 +00:00 
Author: https://github.com/AtkinsSJ
Commit: https://github.com/LadybirdBrowser/ladybird/commit/301502a3a12
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1788
Reviewed-by: https://github.com/tcl3
2 changed files with 495 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

158
Tests/LibWeb/Text/expected/css/calc-coverage.txt Normal file
View file

@ -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'

337
Tests/LibWeb/Text/input/css/calc-coverage.html Normal file
View file

@ -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>