- From: François REMY <francois.remy.dev@outlook.com>
- Date: Thu, 5 Sep 2013 18:52:48 -0700
- To: "'Alan Stearns'" <stearns@adobe.com>, <www-style@w3.org>
- CC: "'Laurence Mclister'" <lmcliste@adobe.com>
According to my reading, the radius defines both an height and a width, since it replaces radius-x (a width) and radius-y (an height), and therefore falls in both the first (use viewport's width) and the second (use viewport's height) categories, hence the indetermination.
Anyway, the SQRT-behavior is not what the current Chrome Canary implementation does. My initial tests seemed to show it always used the width, but in fact it seems it uses the minimum value between the width and the height.
Test case:
<!doctype html>
<html>
<head>
<title>Shapes Circle Radius Test</title>
</head>
<body>
<div style="width:100px; height:100px; font-size: 5px; -webkit-shape-inside: circle(0%, 0%, 50%); background: grey; text-align: justify;">
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
</div>
<hr style="margin-top: 100px" />
<div style="width:200px; height:100px; font-size: 5px; -webkit-shape-inside: circle(0%, 0%, 50%); background: grey; text-align: justify;">
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
</div>
<hr style="margin-top: 100px" />
<div style="width:100px; height:200px; font-size: 5px; -webkit-shape-inside: circle(0%, 0%, 50%); background: grey; text-align: justify;">
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
</div>
<hr style="margin-top: 100px" />
<div style="width:200px; height:200px; font-size: 5px; -webkit-shape-inside: circle(0%, 0%, 50%); background: grey; text-align: justify;">
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x
</div>
</body>
</html>
± -----Message d'origine-----
± De : Alan Stearns [mailto:stearns@adobe.com]
± Envoyé : jeudi 5 septembre 2013 15:57
± À : François REMY; www-style@w3.org
± Cc : Laurence Mclister
± Objet : Re: [css-shapes] circle radius as a percentage
±
± On 9/5/13 3:49 PM, "François REMY" <francois.remy.dev@outlook.com>
± wrote:
±
± >Some clarification of the css-shapes-1 spec (regarding how to interpret
± >a percentage value used as a circle radius) would be welcome, I guess,
± >for people trying to implement the spec.
± >
± >Indeed, it seems to me it is not specified whether the percentage is
± >considered from the width direction or from the height direction, or
± >form any other kind of reference. My own implementation used the width
± >direction for consistency with ellipse but it would probably just be
± >better to disallow percentage-defined radius for circles.
± >
± >Relevant text from the spec:
± >
± > circle([<length>|<percentage>][, [<length>|<percentage>]]{2})
± >
± > The three values values represent cx, cy, and r.
± > They define the x-axis and y-axis coordinates of the center of the
± >circle and the radius of the circle.
± > A negative value for r is invalid.
± >
± >For what it's worth, I'm not quite sure why there's a need for circle
± >function when we could simply consider as a circle an ellipse with 3
± >arguments, but I guess it's for the sake of consistency with SVG.
± >
± >Best regards,
± >Francois
±
± Look at the last sentence of section 3.2:
±
± ---
± For the radius r of the circle shape,
± a percentage value is resolved as
± specified in the SVG recommendation.
± ---
±
± The relevant part of the SVG rec is:
±
± ---
± For any other length value expressed
± as a percentage of the viewport,
± the percentage is calculated as
± the specified percentage of
± sqrt((actual-width)**2 +
± (actual-height)**2))/sqrt(2).
±
± ---
±
± Thanks,
±
± Alan
±
Received on Friday, 6 September 2013 01:53:25 UTC