Closed Bug 1419792 Opened 3 years ago Closed 3 years ago

Shapes highlighter drawn inaccurately for shape-outside with negative margins (59 Branch)


(DevTools :: Inspector, defect, P2)



(firefox59 verified, firefox61 verified, firefox62 verified)

Firefox 59
Tracking Status
firefox59 --- verified
firefox61 --- verified
firefox62 --- verified


(Reporter: eric, Assigned: mpark)


(Blocks 1 open bug)



(2 files)

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:59.0) Gecko/20100101 Firefox/59.0
Build ID: 20171122103138

Steps to reproduce:

1. Go to
2. Inspect the image of the red KitchenAid stand mixer on the left side of the article, partway down the page.
3. Click the shape-editor icon for the shape-outside property on the image (make sure you have layout.css.shape-outside.enabled enabled in about:config)

**NOTE**: I indicated 59 Branch in the Summary instead of the Version dropdown because the dropdown only goes to 58 Branch.

Actual results:

The handles are drawn with respect to the image, but the actual effect of the shape is calculated with respect to area inside the margins.  Moving the handles reflows the text correctly (it seems) for the resulting shape.  See attached screenshot of how Chrome represents the image’s margins and the shape handles.  There is a negative left margin used to pull the image out of the content, which appears to be what’s confusing the shape editor.

To be clear: the calculation of the actual shape, and the resulting flow of text around said shape, appears to be correct.  It’s the drawing of the shape-editor handles and lines that appears to be incorrect.

Expected results:

The editor handles should be placed, and the lines drawn, with respect to where the actual shape is calculated.
Blocks: 1242029
Component: Untriaged → Developer Tools: Inspector
Priority: -- → P2
Assignee: nobody → mpark
Ever confirmed: true
Comment on attachment 8931016 [details]
Bug 1419792 - Shapes highlighter drawn inaccurately for shape-outside with margins.

::: devtools/server/actors/highlighters/shapes.js:1455
(Diff revision 1)
>        prefix: "inset(",
>        coordParser: this.insetPoints.bind(this)
>      }];
>      const geometryTypes = ["margin", "border", "padding", "content"];
> -    // default to border
> +    // default to border for clip-path, margin for shape-outside

s/,/, and
Attachment #8931016 - Flags: review?(gl) → review+
Pushed by
Shapes highlighter drawn inaccurately for shape-outside with margins. r=gl
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 59
Duplicate of this bug: 1419786
Hi everyone, i have retested this issue on Windows 10 , Windows 7 , Mac OSx and Linux using the latest version of nightly 62.0a1 (2018-05-29) and i can Confirm it as Fixed.
I will mark it accordingly.
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.