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

Status: VERIFIED FIXED

(DevTools :: Inspector, defect, P2)

Description

[Eric A. Meyer]

Attachment: Screenshot of Chrome rendering the shape and handles correctly

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 https://meyerweb.com/eric/thoughts/2017/03/20/handiwork/
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.

Comment 1

[Mike Park [:mparkms]]

Attachment: Bug 1419792 - Shapes highlighter drawn inaccurately for shape-outside with margins.

Review commit: https://reviewboard.mozilla.org/r/202098/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/202098/

Comment 2

[Gabriel Luong [:gl] (ΦωΦ)]

Comment on attachment 8931016 [details]
Bug 1419792 - Shapes highlighter drawn inaccurately for shape-outside with margins.

https://reviewboard.mozilla.org/r/202098/#review207542

::: 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

Comment 3

[Mike Park [:mparkms]]

Comment on attachment 8931016 [details]
Bug 1419792 - Shapes highlighter drawn inaccurately for shape-outside with margins.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/202098/diff/1-2/

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/019c7b6b48a1
Shapes highlighter drawn inaccurately for shape-outside with margins. r=gl

Comment 5

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/019c7b6b48a1

Comment 7

[Rares Doghi, Desktop QA]

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.