1455558 - The highlight of the DevTools Shape Tool is changing shape at zoom at Circle and Ellipse

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[David Olah]

[Affected versions]: 
Nightly 61.0a1

[Affected platforms]:
Platforms: Windows 10 x 64, Windows 7 x 32, Mac OS X 10.12 and Ubuntu 16.04 x64.

[Steps to reproduce]:
1. Go to about:config and set "layout.css.shape-outside.enabled" to true.
2. Go to http://labs.jensimmons.com/2016/examples/shapes-1.html and http://labs.jensimmons.com/2016/examples/shapes-2.html
3. Right click on the image and then click on "Inspect Element".
4. Click (or Ctrl + Click) on the button displayed next to clip-path to toggle the shape tool on
5. Zoom the page in and out

[Expected result]:
- The shape of the highlight remains the same (even if itself zooms with the image)

[Actual result]:
- The shape of the highlight changes

Note: The issue reproduces on Circle and Ellipse only with fixed width. When the width is not fixed, the behaviour is as expecte (the shapes zooms after the shape). On Poligon and Inset it is fixed by: Bug 1450668

Comment 1

[Razvan Caliman [:rcaliman]]

Attachment: shape-outside-ellipse-zoom-viewport-units.mov

Comment 2

[Razvan Caliman [:rcaliman]]

Attachment: shape-outside-circle-zoom-viewport-units.mov

Comment 3

[Razvan Caliman [:rcaliman]]

Attachment: shape-outside-ellipse-zoom-pixels.mov

Comment 4

[Razvan Caliman [:rcaliman]]

Attachment: shape-outside-circle-zoom-pixels.mov

Comment 5

[Razvan Caliman [:rcaliman]]

I'm unable to reproduce. Can you please record a view of the steps?

I added videos of attempting these steps on the mentioned files. In all of them, the tool behaves as expected: the shape outline of the tool follows the shape of the text wrapping. Viewport units don't scale with zoom, both the shape and the image stay constant. Pixels do scale with zoom, both the shape and image scale accordingly.

There is a known bug (Bug 1451684) for circles and ellipses with implicit or explicit radii set to "closest-side" where the radii actually use "farthest-side". This is evident in the slightly misaligned circle shape vs text wrapping in the tomato sample.

Comment 6

[David Olah]

Sorry Razvan. it looks like i forgot a step between 4. and 5. in Comment 0. There, you should change a bit the shape of the Circle/Ellipse and then execute step 5. here is also a short video to reproduce the issue: https://www.screencast.com/t/9WUeoGkybZO