1522557 - Shape Path Editor incorrectly shows points defined with calc() mixing % and other units

Status: UNCONFIRMED

(DevTools :: Inspector, defect, P3)

Description

[Remi]

Attachment: fx-shape-path-editor-bug.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:64.0) Gecko/20100101 Firefox/64.0

Steps to reproduce:

1. Go to https://codepen.io/hteumeuleu/pen/YBypMG
2. Inspect element <div class="box">.
3. Activate the Shape Path Editor for either clip-path or shape-outside.

Actual results:

The first point (left top) of the Shape Path Editor doesn't fit the actual shape. (It's especially visible with the clip-path property.) The first point is visible at 50% 0. (See fx-shape-path-editor-bug.png.)

Expected results:

The first point (left top) of the Shape Path Editor should be at calc(50% - 5rem) 0) as defined in the code. It seems that whenever percentage units are mixed with other units in a calc() in a polygon(), the Shape Path Editor only keeps the value computed by the percentage.

Comment 1

[Razvan Caliman [:rcaliman]]

Thank you for filing this, Remi!

There is indeed an issue with percentages used in calc() expressions, as seen in a cursory view of the code:
https://searchfox.org/mozilla-central/rev/c035ee7d3a5cd6913e7143e1bce549ffb4a566ff/devtools/server/actors/highlighters/shapes.js#2661-2671

It seems to be related to the way computed property values are returned. This needs a bit of investigation.