Closed Bug 1853559 Opened 8 months ago Closed 8 months ago

Shape path editor for inset() draws incorrectly when the inset() uses pixels on an element which is sized in page %

Categories

(DevTools :: Inspector, defect)

Firefox 119
Desktop
All
defect

Tracking

(firefox119 fixed)

RESOLVED FIXED
119 Branch
Tracking Status
firefox119 --- fixed

People

(Reporter: vinny.diehl, Assigned: vinny.diehl)

References

(Blocks 1 open bug)

Details

(Whiteboard: [devtools:relnote])

Attachments

(5 files)

Attached file inset.html

I discovered this bug while playing with the shape editor on the MDN page for inset().

See the attached HTML file for a page that minimally reproduces the issue. If the parent .container's width and height are hardcoded e.g. in pixels, or if the inset() also uses percent, the highlighter is drawn properly; both much match, if there is a mismatch in either width or height then neither side of the highlighter scales correctly.

When the inset() uses em/rem, the problem is the same as with pixels.

When the inset() uses ch, it gets even weirder; the border for the highlighter doesn't appear and the highlighter scales even more wildly, though this scaling behavior with ch is present in other types of shape highlighters and might warrant its own bug (edit: yes, this is a separate issue that I won't be patching here), unlikely though it is that anyone might actually use ch with these.

Attached image It scales strangely
Attachment #9353569 - Attachment mime type: application/octet-stream → text/html

I see what's going on here. I have a patch coming.

Assignee: nobody → vinny.diehl
Status: NEW → ASSIGNED
Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/5b36e36d27ff
Fix inset() shape editor pixel to percent conversion r=nchevobbe,devtools-reviewers
Status: ASSIGNED → RESOLVED
Closed: 8 months ago
Resolution: --- → FIXED
Target Milestone: --- → 119 Branch
Whiteboard: [devtools:relnote]
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: