WPT
wpt / css / css-values / calc-nesting.html
Spec: CSS Values ↗
Runs: Chrome 155.0.8041.0 (wpt@4a01b83e3, 2026-09-04) | Firefox 157.0a1 (wpt@4a01b83e3, 2026-09-04) | Safari 251 preview (wpt@a1e944e7a, 2026-09-04) | Ladybird 1.0-a7825 (wpt@4a01b83e3, 2026-09-04) | Servo Servo 0.6 (wpt@7e3d005d7, 2026-09-03) | Blitz a50cb8971 (wpt@a95401e4e, 2026-09-03)
View on the Blitz WPT dashboard | Open test on wpt.live | wpt.fyi
| Chrome | Firefox | Safari | Ladybird | Servo | Blitz | |
|---|---|---|---|---|---|---|
| Total | 8/8 | 8/8 | 8/8 | 8/8 | 8/8 | 8/8 |
| Subtest | Chrome | Firefox | Safari | Ladybird | Servo | Blitz |
|---|---|---|---|---|---|---|
| e.style['left'] = "calc(20px + calc(80px))" should set the property value | PASS | PASS | PASS | PASS | PASS | PASS |
| e.style['left'] = "calc(calc(100px))" should set the property value | PASS | PASS | PASS | PASS | PASS | PASS |
| e.style['left'] = "calc(calc(2) * calc(50px))" should set the property value | PASS | PASS | PASS | PASS | PASS | PASS |
| e.style['left'] = "calc(calc(150px*2/3))" should set the property value | PASS | PASS | PASS | PASS | PASS | PASS |
| e.style['left'] = "calc(calc(2 * calc(calc(3)) + 4) * 10px)" should set the property value | PASS | PASS | PASS | PASS | PASS | PASS |
| e.style['left'] = "calc(50px + calc(40%))" should set the property value | PASS | PASS | PASS | PASS | PASS | PASS |
| e.style['border'] = "calc(calc(10px)) solid pink" should set the property value | PASS | PASS | PASS | PASS | PASS | PASS |
| Nested calcs should work with layout | PASS | PASS | PASS | PASS | PASS | PASS |