1895187 - Add a way to visualize/debug the inset-area / position-area grid

Status: NEW

(DevTools :: General, enhancement)

Description

[Nicolas Chevobbe [:nchevobbe]]

The inset-area value can be quite complex (see https://drafts.csswg.org/css-anchor-position-1/#resolving-spans)
It would be nice if we offer some kind of vizualisation of the inset-area grid , or maybe even a way to easily fill the value in a visual way (for example by having an highlighter on the page, displayed on top of the anchor element, which would let you select the areas)

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: anchor tool screenshot

Maybe take some inspiration from https://anchor-tool.com/ which does let you visually select what you want and translate it into the correct position-area value

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Maybe take some inspiration from https://anchor-tool.com/ which