Closed Bug 1451684 Opened 2 years ago Closed Last year

Shape Path Editor seems to default to farthest-side for circle

Categories

(DevTools :: Inspector, defect, P3)

defect

Tracking

(firefox62 verified)

VERIFIED FIXED
Firefox 62
Tracking Status
firefox62 --- verified

People

(Reporter: mbalfanz, Assigned: rcaliman)

References

(Blocks 1 open bug)

Details

Attachments

(2 files)

Attached image shape-editor-radius.jpg
The spec [1] defines that the default radius on circles is "closest-side" when nothing is provided.

><shape-radius>
>= <length> | <percentage> | closest-side | farthest-side
>    Defines a radius for a circle or ellipse. If omitted it defaults to closest-side.

However, the shape path editor seems to default to farthest-side by default and ignore situations with no value or closest-side specified

Please see the attached screenshot. All editor "outlines" appear the same, even though the the radius is different. Please also note that on the first and second screen the content is inside the circle boundaries, showing that the platform indeed defaults to closest-side but the highlighter is off.

STR:
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
3. Inspect the image and toggle on the shape path editor

Expected result:
- The highlighter shows a default radius of closest-side

Actual result:
- The highlighter shows a default radius of farthest-side



[1]: https://www.w3.org/TR/css-shapes-1/#typedef-shape-radius
Blocks: 1242029
Product: Firefox → DevTools
Comment on attachment 8987104 [details]
Bug 1451684 - Compute farthest-side / closest-side circle radius as pixels, then resolve to percentages according to formula defined in spec.

https://reviewboard.mozilla.org/r/252336/#review258788

::: devtools/server/actors/highlighters/shapes.js:1886
(Diff revision 1)
>  
>      // Percentage values for circle() are resolved from the
>      // used width and height of the reference box as sqrt(width^2+height^2)/sqrt(2).
>      const computedSize = Math.sqrt((width ** 2) + (height ** 2)) / Math.sqrt(2);
>  
> +    // Position of coordinatees for circle center in pixels.

s/coordinatees/coordinates

"Position coordinates" might sound better here.
Attachment #8987104 - Flags: review?(gl) → review+
The bug stems from mistakenly computing percentage values (closest-side/farthest-side is converted internally to percentages). 

For `circle()`, a radius expressed in percentages must be computed according to the formula described in the CSS Shapes Level 1 spec defined here: https://www.w3.org/TR/css-shapes-1/#funcdef-circle
Pushed by rcaliman@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/33bc3b313306
Compute farthest-side / closest-side circle radius as pixels, then resolve to percentages according to formula defined in spec. r=gl
Assignee: nobody → rcaliman
Status: NEW → ASSIGNED
https://hg.mozilla.org/mozilla-central/rev/33bc3b313306
Status: ASSIGNED → RESOLVED
Closed: Last year
Resolution: --- → FIXED
Target Milestone: --- → Firefox 62
Hi, I retested this issue in version 62.0a1 (2018-06-24) , and the issue no longer occurs. i will mark it Verified as fixed.
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.