mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-30 12:49:19 +00:00
301502a3a1
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));')
```
158 lines
7 KiB
Text
158 lines
7 KiB
Text
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'
|