Skip to content

Commit 2fd0b3a

Browse files
astearnsastearns
committed
[css-shapes] remove commas, add radius keywords
1 parent bde202e commit 2fd0b3a

2 files changed

Lines changed: 80 additions & 46 deletions

File tree

‎css-shapes/Overview.html‎

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
rel=dcterms.rights>
1313
<meta content="CSS Shapes Module Level 1" name=dcterms.title>
1414
<meta content=text name=dcterms.type>
15-
<meta content=2013-10-03 name=dcterms.date>
15+
<meta content=2013-10-04 name=dcterms.date>
1616
<meta content="Vincent Hardy" name=dcterms.creator>
1717
<meta content="Rossen Atanassov" name=dcterms.creator>
1818
<meta content="Alan Stearns" name=dcterms.creator>
@@ -51,7 +51,7 @@
5151

5252
<h1 id=css-shapes-module>CSS Shapes Module Level 1</h1>
5353

54-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 3 October 2013</h2>
54+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 4 October 2013</h2>
5555

5656
<dl>
5757
<dt>This version:
@@ -400,7 +400,7 @@ <h2 id=relation-to-box-model-and-float-behavior><span class=secno>2.
400400
<p>
401401

402402
<pre><code class=css>
403-
shape-outside: rectangle(0,0,0%,0%);
403+
shape-outside: rectangle(0 0 0% 0%);
404404
</code></pre>
405405
</div>
406406

@@ -508,27 +508,45 @@ <h3 id=supported-basic-shapes><span class=secno>3.1. </span>Supported
508508
invalid. See notes below on edge cases for these arguments.
509509
</ul>
510510

511-
<dt><dfn id=circle>circle</dfn>() takes three arguments of &lt;length&gt;
512-
or &lt;percentage&gt;
511+
<dt><dfn id=circle>circle</dfn>() takes two arguments of &lt;length&gt; or
512+
&lt;percentage&gt;, then a third argument of &lt;length&gt;,
513+
&lt;percentage&gt;, or a radius keyword
513514

514515
<dd>
515516
<ul>
516-
<li> The three arguments represent <strong>cx</strong>,
517-
<strong>cy</strong>, and <strong>r</strong>. They define the x-axis and
518-
y-axis coordinates of the center of the circle and the radius of the
519-
circle. A negative value for r is invalid.
517+
<li> The first two arguments represent <strong>cx</strong>,
518+
<strong>cy</strong>. They define the x-axis and y-axis coordinates of
519+
the center of the circle.
520+
521+
<li> The third argument represents <strong>r</strong>, the radius of the
522+
circle. This argument can be one of these keywords: ‘<code
523+
class=property>height</code>’, ‘<code
524+
class=property>width</code>’, ‘<code
525+
class=property>cover</code>’, or ‘<code
526+
class=property>contain</code>’ which are the height, width,
527+
max(height,width) and min(height,width) of the relevant box,
528+
respectively. A negative value for r is invalid.
520529
</ul>
521530

522-
<dt><dfn id=ellipse>ellipse</dfn>() takes four arguments of &lt;length&gt;
523-
or &lt;percentage&gt;
531+
<dt><dfn id=ellipse>ellipse</dfn>() takes two arguments of &lt;length&gt;
532+
or &lt;percentage&gt;, then a two arguments of &lt;length&gt;,
533+
&lt;percentage&gt;, or a radius keyword
524534

525535
<dd>
526536
<ul>
527-
<li> The four arguments represent <strong>cx</strong>,
528-
<strong>cy</strong>, <strong>rx</strong>, and <strong>ry</strong>. They
529-
define the x-axis and y-axis coordinates of the center of the ellipse
530-
and the x-axis and y-axis radius of the ellipse. Negative values for rx
531-
and ry are invalid.
537+
<li> The first two arguments represent <strong>cx</strong>,
538+
<strong>cy</strong>. They define the x-axis and y-axis coordinates of
539+
the center of the ellipse.
540+
541+
<li> The last two arguments represent <strong>rx</strong>, and
542+
<strong>ry</strong>, the x-axis and y-axis radii of the ellipse. These
543+
arguments can be one of these keywords: ‘<code
544+
class=property>height</code>’, ‘<code
545+
class=property>width</code>’, ‘<code
546+
class=property>cover</code>’, or ‘<code
547+
class=property>contain</code>’ which are the height, width,
548+
max(height,width) and min(height,width) of the relevant box,
549+
respectively. Negative values for rx and ry are invalid.
532550
</ul>
533551

534552
<dt><dfn id=polygon>polygon</dfn>() starts with an optional
@@ -577,20 +595,20 @@ <h3 id=basic-shape-syntax><span class=secno>3.2. </span>Syntax of Basic
577595
Shapes</h3>
578596

579597
<pre>
580-
rectangle() =
581-
rectangle( &lt;shape-arg&gt;, &lt;shape-arg&gt;, &lt;shape-arg&gt;, &lt;shape-arg&gt; [, &lt;shape-arg&gt;]? [, &lt;shape-arg&gt;]? )
598+
rectangle() = rectangle( &lt;shape-arg&gt;{4,4} &lt;shape-arg&gt;? &lt;shape-arg&gt;? )
582599

583-
inset-rectangle() =
584-
inset-rectangle( &lt;shape-arg&gt;, &lt;shape-arg&gt;, &lt;shape-arg&gt;, &lt;shape-arg&gt; [, &lt;shape-arg&gt;]? [, &lt;shape-arg&gt;]? )
600+
inset-rectangle() = inset-rectangle( &lt;shape-arg&gt;{4,4} &lt;shape-arg&gt;? &lt;shape-arg&gt;? )
585601

586-
circle() = circle( &lt;shape-arg&gt;, &lt;shape-arg&gt;, &lt;shape-arg&gt; )
602+
circle() = circle( &lt;shape-arg&gt;{2,2} &lt;shape-radius&gt; )
587603

588-
ellipse() = ellipse( &lt;shape-arg&gt;, &lt;shape-arg&gt;, &lt;shape-arg&gt;, &lt;shape-arg&gt; )
604+
ellipse() = ellipse( &lt;shape-arg&gt;{2,2} &lt;shape-radius&gt;{2,2} )
589605

590-
polygon() = polygon( [&lt;fill-rule&gt;,]? [&lt;shape-arg&gt;]{2}# )
606+
polygon() = polygon( [&lt;fill-rule&gt;,]? [&lt;shape-arg&gt; &lt;shape-arg&gt;]# )
591607

592608
&lt;shape-arg&gt; = &lt;length&gt; | &lt;percentage&gt;
593609

610+
&lt;shape-radius&gt; = &lt;length&gt; | &lt;percentage&gt; | width | height | cover | contain
611+
594612
&lt;fill-rule&gt; = nonzero | evenodd
595613
</pre>
596614

‎css-shapes/Overview.src.html‎

Lines changed: 39 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,7 @@ <h2 id="relation-to-box-model-and-float-behavior">Relation to the box model and
283283
to flow through all of the float's box.
284284
<p>
285285
<pre><code class="css">
286-
shape-outside: rectangle(0,0,0%,0%);
286+
shape-outside: rectangle(0 0 0% 0%);
287287
</code></pre>
288288
</div>
289289

@@ -423,37 +423,53 @@ <h3 id="supported-basic-shapes">Supported Shapes</h3>
423423
</ul>
424424
</dd>
425425
<dt><dfn id="circle">circle</dfn>()
426-
takes three arguments
427-
of &lt;length&gt; or &lt;percentage&gt;</dt>
426+
takes two arguments
427+
of &lt;length&gt; or &lt;percentage&gt;, then a third argument of &lt;length&gt;, &lt;percentage&gt;, or a radius keyword</dt>
428428
<dd>
429429
<ul>
430430
<li>
431-
The three arguments represent
431+
The first two arguments represent
432432
<strong>cx</strong>,
433-
<strong>cy</strong>,
434-
and <strong>r</strong>.
433+
<strong>cy</strong>.
435434
They define the x-axis and y-axis coordinates
436-
of the center of the circle
437-
and the radius of the circle.
435+
of the center of the circle.
436+
</li>
437+
<li>
438+
The third argument represents
439+
<strong>r</strong>, the radius
440+
of the circle.
441+
This argument can be one of these keywords:
442+
'height', 'width', 'cover', or 'contain'
443+
which are the
444+
height, width, max(height,width) and min(height,width)
445+
of the relevant box, respectively.
438446
A negative value for r is invalid.
439447
</li>
440448
</ul>
441449
</dd>
442450
<dt><dfn id="ellipse">ellipse</dfn>()
443-
takes four arguments
444-
of &lt;length&gt; or &lt;percentage&gt;</dt>
451+
takes two arguments
452+
of &lt;length&gt; or &lt;percentage&gt;, then a two arguments of &lt;length&gt;, &lt;percentage&gt;, or a radius keyword</dt>
445453
<dd>
446454
<ul>
447455
<li>
448-
The four arguments represent
456+
The first two arguments represent
449457
<strong>cx</strong>,
450-
<strong>cy</strong>,
451-
<strong>rx</strong>, and
452-
<strong>ry</strong>.
458+
<strong>cy</strong>.
453459
They define the x-axis and y-axis coordinates
454-
of the center of the ellipse
455-
and the x-axis and y-axis radius
460+
of the center of the ellipse.
461+
</li>
462+
<li>
463+
The last two arguments represent
464+
<strong>rx</strong>, and
465+
<strong>ry</strong>,
466+
the x-axis and y-axis radii
456467
of the ellipse.
468+
These arguments can be one of these keywords:
469+
'height', 'width', 'cover', or 'contain'
470+
which are the
471+
height, width, max(height,width) and min(height,width)
472+
of the relevant box, respectively.
457473
Negative values for rx and ry are invalid.
458474
</li>
459475
</ul>
@@ -507,20 +523,20 @@ <h3 id="supported-basic-shapes">Supported Shapes</h3>
507523
<h3 id='basic-shape-syntax'>Syntax of Basic Shapes</h3>
508524

509525
<pre>
510-
rectangle() =
511-
rectangle( &lt;shape-arg&gt;, &lt;shape-arg&gt;, &lt;shape-arg&gt;, &lt;shape-arg&gt; [, &lt;shape-arg&gt;]? [, &lt;shape-arg&gt;]? )
526+
rectangle() = rectangle( &lt;shape-arg&gt;{4,4} &lt;shape-arg&gt;? &lt;shape-arg&gt;? )
512527

513-
inset-rectangle() =
514-
inset-rectangle( &lt;shape-arg&gt;, &lt;shape-arg&gt;, &lt;shape-arg&gt;, &lt;shape-arg&gt; [, &lt;shape-arg&gt;]? [, &lt;shape-arg&gt;]? )
528+
inset-rectangle() = inset-rectangle( &lt;shape-arg&gt;{4,4} &lt;shape-arg&gt;? &lt;shape-arg&gt;? )
515529

516-
circle() = circle( &lt;shape-arg&gt;, &lt;shape-arg&gt;, &lt;shape-arg&gt; )
530+
circle() = circle( &lt;shape-arg&gt;{2,2} &lt;shape-radius&gt; )
517531

518-
ellipse() = ellipse( &lt;shape-arg&gt;, &lt;shape-arg&gt;, &lt;shape-arg&gt;, &lt;shape-arg&gt; )
532+
ellipse() = ellipse( &lt;shape-arg&gt;{2,2} &lt;shape-radius&gt;{2,2} )
519533

520-
polygon() = polygon( [&lt;fill-rule&gt;,]? [&lt;shape-arg&gt;]{2}# )
534+
polygon() = polygon( [&lt;fill-rule&gt;,]? [&lt;shape-arg&gt; &lt;shape-arg&gt;]# )
521535

522536
&lt;shape-arg&gt; = &lt;length&gt; | &lt;percentage&gt;
523537

538+
&lt;shape-radius&gt; = &lt;length&gt; | &lt;percentage&gt; | width | height | cover | contain
539+
524540
&lt;fill-rule&gt; = nonzero | evenodd
525541
</pre>
526542

0 commit comments

Comments
 (0)