8000 [css-shapes] adding serialization examples · w3c/csswg-drafts@151c013 · GitHub
Skip to content

Commit 151c013

Browse files
astearnsastearns
committed
[css-shapes] adding serialization examples
1 parent 446ebe7 commit 151c013

2 files changed

Lines changed: 134 additions & 3 deletions

File tree

‎css-shapes/Overview.html‎

Lines changed: 64 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
</p>
6464
<h1 class="p-name no-ref" id=title>CSS Shapes Module Level 1</h1>
6565
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
66-
<span class=dt-updated><span class=value-title title=20140204>4 February 2014</span></span></span></h2>
66+
<span class=dt-updated><span class=value-title title=20140205>5 February 2014</span></span></span></h2>
6767
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-shapes/>http://dev.w3.org/csswg/css-shapes/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-shapes/>http://www.w3.org/TR/css-shapes/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-shapes/>http://dev.w3.org/csswg/css-shapes/</a>
6868
<dt>Feedback:</dt>
6969
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-shapes%5D%20feedback">www-style@w3.org</a>
@@ -604,14 +604,76 @@ <h3 class="heading settled heading" data-level=3.3 id=basic-shape-serialization>
604604
serialize as per their individual grammars,
605605
in the order the grammars are written in,
606606
avoiding calc() expressions where possible,
607+
avoiding calc() transformations,
607608
omitting components when possible without changing the meaning,
608609
joining space-separated tokens with a single space,
609610
and following each serialized comma with a single space.
610611

611612
<p> The <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#position-value title="<position>">&lt;position&gt;</a> values in <a class=css data-link-type=maybe href=#funcdef-ellipse title=ellipse()>ellipse()</a> and <a class=css data-link-type=maybe href=#funcdef-circle title=circle()>circle()</a>
612613
serialize to their 2- and 4-value forms only,
614+
normalized to their computed values (as above),
613615
preferring the 2-value form
614-
when it can be expressed without calc().
616+
when it can be expressed without calc(),
617+
preferring left and top origins,
618+
and preferring 0% over a zero length.
619+
620+
<div class=example>
621+
622+
623+
<p> Normalizing <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#position-value title="<position>">&lt;position&gt;</a> to its computed value (and omitting components such as zero length offsets) means that keywords without an offset turn into percentages.
624+
625+
<pre><code class=css>
626+
circle(at left bottom)
627+
628+
serializes as "circle(at 0% 100%)"
629+
</code></pre>
630+
<p> Omitting components means that some default values do not show up in the serialization. But since <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#position-value title="<position>">&lt;position&gt;</a> always uses the 2- or 4-value form, a default <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#position-value title="<position>">&lt;position&gt;</a> is not omitted.
631+
632+
<pre><code class=css>
633+
circle(closest-side at center)
634+
635+
serializes as "circle(at 50% 50%)"
636+
</code></pre>
637+
<p> Using grammar order means that <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#position-value title="<position>">&lt;position&gt;</a> values always give horizontal components first, then vertical.
638+
639+
<pre><code class=css>
640+
circle(at bottom left)
641+
642+
serializes as "circle(at 0% 100%)"
643+
</code></pre>
644+
<p> Avoiding calc() expressions means that some <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#position-value title="<position>">&lt;position&gt;</a> values that could be simplified to the 2-value form must be serialized in 4-value form instead.
645+
646+
<pre><code class=css>
647+
circle(at right 5% bottom 10px)
648+
649+
serializes as "circle(at right 5% bottom 10px)"
650+
651+
not as "circle(at 95% calc(100% - 10px))"
652+
</code></pre>
653+
<p> Avoiding calc() transformations means that if a specified (or computed) calc() must stay in calc() form, it will be used as-is, not reformulated with a different origin or reduced.
654+
655+
<pre><code class=css>
656+
bottom calc(10% + 5px)
657+
658+
serializes as "bottom calc(10% + 5px)"
659+
660+
not as "top calc(90% - 5px)" or "calc(90% - 5px)"
661+
</code></pre>
662+
<p> Preferring 0% over a zero length comes up when you must supply an omitted offset.
663+
664+
<pre><code class=css>
665+
circle(at right 5px top)
666+
667+
serializes as "circle(at right 5px top 0%)"
668+
</code></pre>
669+
<p> Preferring left and top origins means that some percentage offsets will normalize to those origins (when calc can be avoided).
670+
671+
<pre><code class=css>
672+
circle(at right 5% top)
673+
674+
serializes as "circle(at 95% 0%)"
675+
</code></pre>
676+
</div>
615677

616678
<h3 class="heading settled heading" data-level=3.4 id=basic-shape-interpolation><span class=secno>3.4 </span><span class=content>
617679
Interpolation of Basic Shapes</span><a class=self-link href=#basic-shape-interpolation></a></h3>

‎css-shapes/Overview.src.html‎

Lines changed: 70 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -480,14 +480,83 @@ <h3 id='basic-shape-serialization'>
480480
serialize as per their individual grammars,
481481
in the order the grammars are written in,
482482
avoiding calc() expressions where possible,
483+
avoiding calc() transformations,
483484
omitting components when possible without changing the meaning,
484485
joining space-separated tokens with a single space,
485486
and following each serialized comma with a single space.
486487

487488
The <<position>> values in ''ellipse()'' and ''circle()''
488489
serialize to their 2- and 4-value forms only,
490+
normalized to their computed values (as above),
489491
preferring the 2-value form
490-
when it can be expressed without calc().
492+
when it can be expressed without calc(),
493+
preferring left and top origins,
494+
and preferring 0% over a zero length.
495+
496+
<div class="example">
497+
498+
499+
Normalizing <<position>> to its computed value (and omitting components such as zero length offsets) means that keywords without an offset turn into percentages.
500+
501+
<pre><code class="css">
502+
circle(at left bottom)
503+
504+
serializes as "circle(at 0% 100%)"
505+
</code></pre>
506+
507+
Omitting components means that some default values do not show up in the serialization. But since <<position>> always uses the 2- or 4-value form, a default <<position>> is not omitted.
508+
509+
<pre><code class="css">
510+
circle(closest-side at center)
511+
512+
serializes as "circle(at 50% 50%)"
513+
</code></pre>
514+
515+
Using grammar order means that <<position>> values always give horizontal components first, then vertical.
516+
517+
<pre><code class="css">
518+
circle(at bottom left)
519+
520+
serializes as "circle(at 0% 100%)"
521+
</code></pre>
522+
523+
Avoiding calc() expressions means that some <<position>> values that could be simplified to the 2-value form must be serialized in 4-value form instead.
524+
525+
<pre><code class="css">
526+
circle(at right 5% bottom 10px)
527+
528+
serializes as "circle(at right 5% bottom 10px)"
529+
530+
not as "circle(at 95% calc(100% - 10px))"
531+
</code></pre>
532+
533+
Avoiding calc() transformations means that if a specified (or computed) calc() must stay in calc() form, it will be used as-is, not reformulated with a different origin or reduced.
534+
535+
<pre><code class="css">
536+
bottom calc(10% + 5px)
537+
538+
serializes as "bottom calc(10% + 5px)"
539+
540+
not as "top calc(90% - 5px)" or "calc(90% - 5px)"
541+
</code></pre>
542+
543+
Preferring 0% over a zero length comes up when you must supply an omitted offset.
544+
545+
<pre><code class="css">
546+
circle(at right 5px top)
547+
548+
serializes as "circle(at right 5px top 0%)"
549+
</code></pre>
550+
551+
Preferring left and top origins means that some percentage offsets will normalize to those origins (when calc can be avoided).
552+
553+
<pre><code class="css">
554+
circle(at right 5% top)
555+
556+
serializes as "circle(at 95% 0%)"
557+
</code></pre>
558+
559+
</div>
491560

492561
<h3 id='basic-shape-interpolation'>
493562
Interpolation of Basic Shapes</h3>

0 commit comments

Comments
 (0)