CSS Shapes shape-outside: url; float inconsistency - css

Question

When I use shape-outside: url(anyimage.png) and float it to the right, the text around it wraps nicely as intended, but when I float it to the left, the text to the right wraps around the the edge of a rectangle.
Any idea why this should be so? I have tried with several transparent shapes and the text wraps nicely when the image is floated to the right, but when its floated to the left, the text defaults to a wrapping around a rectangle.
Any idea if this is a known bug? I'm using the latest version of Chrome (46.0.2490.86 m) and only interested in implementation on Chrome.
Here is the image of float issue attached
Also here is the image of the circle png
and here is the CSS:
.element{
width:200px;
height:200px;
float:right;
shape-outside: url("circle_new.png");
shape-image-threshold: 0px;
shape-margin: 10px;
}
**
added after first response: let me clarify, am looking for a reason for the inconsistent behaviour of shape-outside: url. I understand I could very well use circle() as pointed out by the first answer, but I want this to work for all shapes, that is why I am seeking enlightenment specifically on the issue of shape-outside: url.

Answer 1

You have a syntax error
.element{
width:200px;
height:200px;
float:right;
shape-outside: url("circle_new.png");
shape-image-threshold: 0px; /* error */
shape-image-threshold: 0; /* in the range 0 - 1 */
shape-margin: 10px;
}
Since you don't post an example, it's difficult to tell, but this property is subject to cross-origin issues. So another posible problem would be the image being blocked.
Have you checked the console ?
Note that the fact that you are seeing the image does not imply that it isn't being blocked in the shape-outside url

Answer 2

If your aim is to make the text wrap around a circle, you should use circle() for the shape-outside property :
p{
width:400px;
text-align:justify;
}
.element {
width:200px;
height:200px;
float:right;
shape-outside: circle(50%);
shape-image-threshold: 0px;
shape-margin: 10px;
background-image:url('http://i.stack.imgur.com/gtBMS.png');
background-size:contain;
}
p+p .element{
float:left;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis quam ex. Fusce sagittis purus mi, ut volutpat lorem venenatis id. In varius sodales dui ut molestie. <span class="element"></span>
Phasellus pretium metus id massa volutpat, sed gravida nisl fringilla. Quisque eu gravida lacus, in mollis risus. Duis et est sodales, iaculis mi et, scelerisque elit. Vivamus in massa at lectus hendrerit condimentum. Curabitur nec dignissim turpis, elementum viverra urna. In hac habitasse platea dictumst. Nunc eget ullamcorper augue. Aliquam sit amet quam feugiat, finibus lacus ac, luctus mi. In quis leo nec lectus porttitor pulvinar mollis vitae tellus. Fusce turpis quam, fringilla at aliquam sit amet, porta ac purus. Suspendisse ac faucibus dolor. Aliquam erat volutpat. Nam mauris metus, pharetra vitae velit eu, suscipit molestie odio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis quam ex. Fusce sagittis purus mi, ut volutpat lorem venenatis id. In varius sodales dui ut molestie. <span class="element"></span>
Phasellus pretium metus id massa volutpat, sed gravida nisl fringilla. Quisque eu gravida lacus, in mollis risus. Duis et est sodales, iaculis mi et, scelerisque elit. Vivamus in massa at lectus hendrerit condimentum. Curabitur nec dignissim turpis, elementum viverra urna. In hac habitasse platea dictumst. Nunc eget ullamcorper augue. Aliquam sit amet quam feugiat, finibus lacus ac, luctus mi. In quis leo nec lectus porttitor pulvinar mollis vitae tellus. Fusce turpis quam, fringilla at aliquam sit amet, porta ac purus. Suspendisse ac faucibus dolor. Aliquam erat volutpat. Nam mauris metus, pharetra vitae velit eu, suscipit molestie odio.</p>
Note that I also added text-align:justify; so the text wraps closer to the shape on the right

Answer 3

In both situations the text isn’t all aligned to the right. This behavior is normal. The text starts at the same point on the left and ends at different points on the right, since each line has a different length. It doesn’t have much to do with your image really.
The best way around this is to use shape-outside: circle(); and set a proper number arugment inside circle(). Hope that helps.