1522806 - Shape Path Editor does not support CSS variables in shape coordinates

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Razvan Caliman [:rcaliman]]

The option to toggle on the Shape Path Editor is not offered whenever the coordinates of the path include var().

This is a guard and intentional for now. We need to investigate the complexity of using computed style values for the CSS variables instead.

Steps to reproduce:

• Copy and paste this in the address bar:

data:text/html,<style>div {--radius: 50%; width:500px; height:500px; background: black; clip-path: circle(var(--radius))}</style><div>

• Open DevTools and inspect the div element

Expected:

• There should be an icon next to the clip-path property in the Rules view to toggle the Shape Path Editor.

Result:

• There is no option to toggle the Shape Path Editor.