Skip to content

Commit 4c27cfe

Browse files
tabatkinstabatkins
committed
Created a new top-level section "Serialization", and moved the gradient serialization to it.
1 parent 509d9bd commit 4c27cfe

2 files changed

Lines changed: 182 additions & 160 deletions

File tree

‎css3-images/Overview.html‎

Lines changed: 118 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -142,10 +142,7 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
142142
<li><a href="#color-stop-syntax"><span class=secno>5.3.
143143
</span><code>color-stop</code> Syntax</a>
144144

145-
<li><a href="#serializing-gradients"><span class=secno>5.4.
146-
</span>Serializing Gradients</a>
147-
148-
<li><a href="#interpolating-gradients"><span class=secno>5.5.
145+
<li><a href="#interpolating-gradients"><span class=secno>5.4.
149146
</span>Interpolating Gradients</a>
150147
</ul>
151148

@@ -167,6 +164,13 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
167164
&lsquo;<code class=property>object-position</code>&rsquo; Property</a>
168165
</ul>
169166

167+
<li><a href="#serialization"><span class=secno>7. </span>Serialization</a>
168+
169+
<ul class=toc>
170+
<li><a href="#serializing-gradients"><span class=secno>7.1.
171+
</span>Serializing Gradients</a>
172+
</ul>
173+
170174
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
171175

172176
<li class=no-num><a href="#references">References</a>
@@ -857,103 +861,7 @@ <h3 id=color-stop-syntax><span class=secno>5.3.
857861
</div>
858862

859863
<div>
860-
<h3 id=serializing-gradients><span class=secno>5.4. </span>Serializing
861-
Gradients</h3>
862-
863-
<p>To serialize a linear gradient, let s initially be the empty string,
864-
run these steps, and then return s:</p>
865-
866-
<ol>
867-
<li>Append "linear-gradient(" to s.
868-
869-
<li>
870-
<ul>
871-
<li>If the first argument to the gradient function was a keyword,
872-
serialize the keyword and append it to s.
873-
874-
<li>Otherwise, if the first argument to the gradient function was an
875-
&lt;angle>, serialize the &lt;angle> and append it to s.
876-
877-
<li>Otherwise, append "top" to s.
878-
</ul>
879-
880-
<li>If the first argument to the gradient function was not a color-stop,
881-
append a comma and a space ", " to s.
882-
883-
<li>For each color-stop in the gradient, do the following:
884-
<ol>
885-
<li>Serialize the &lt;color>, and append it to s.
886-
887-
<li>If a &lt;length> or &lt;percentage> was specified, append a space
888-
" " to s, then serialize the &lt;length> or &lt;percentage> and
889-
append it to s.
890-
891-
<li>Append a comma and a space ", " to s.
892-
</ol>
893-
894-
<li>Append a close parenthesis ")" to s.
895-
</ol>
896-
897-
<p>To serialize a radial gradient, let s initially be the empty string,
898-
run these steps, and then return s:</p>
899-
900-
<ol>
901-
<li>Append "radial-gradient(" to s.
902-
903-
<li>If a &lt;bg-position> was specified in the first argument to the
904-
gradient function, serialize it and append it to s. Otherwise, append
905-
"center" to s.
906-
907-
<li>Append a comma and a space ", " to s.
908-
909-
<li>
910-
<ul>
911-
<li>If a &lt;shape> and/or &lt;size> was specified in the second
912-
argument to the gradient function:
913-
<ol>
914-
<li>If a &lt;shape> was specified, serialize it as a keyword and
915-
append it to s. Otherwise, append "ellipse" to s.
916-
917-
<li>Append a space " " to s.
918-
919-
<li>If a &lt;size> was specified, serialize it as a keyword and
920-
append it to s. Otherwise, append "cover" to s.
921-
</ol>
922-
923-
<li>Otherwise, if two &lt;length>s or &lt;percentage>s were specified
924-
in the second argument to the gradient function:
925-
<ol>
926-
<li>Serialize the first &lt;length> or &lt;percentage> and append it
927-
to s.
928-
929-
<li>Append a space " " to s.
930-
931-
<li>Serialize the second &lt;length> or &lt;percentage> and append
932-
it to s.
933-
</ol>
934-
935-
<li>Otherwise, append "ellipse cover" to s.
936-
</ul>
937-
938-
<li>Append a comma and a space ", " to s.
939-
940-
<li>For each color-stop in the gradient, do the following:
941-
<ol>
942-
<li>Serialize the &lt;color>, and append it to s.
943-
944-
<li>If a &lt;length> or &lt;percentage> was specified, append a space
945-
" " to s, then serialize the &lt;length> or &lt;percentage> and
946-
append it to s.
947-
948-
<li>Append a comma and a space ", " to s.
949-
</ol>
950-
951-
<li>Append a close parenthesis ")" to s.
952-
</ol>
953-
</div>
954-
955-
<div>
956-
<h3 id=interpolating-gradients><span class=secno>5.5.
864+
<h3 id=interpolating-gradients><span class=secno>5.4.
957865
</span>Interpolating Gradients</h3>
958866

959867
<p>Gradient images can be interpolated directly in CSS transitions and
@@ -1561,6 +1469,115 @@ <h3 id=object-position><span class=secno>6.4. </span>The &lsquo;<a
15611469
&lsquo;<code class=property>image-fit</code>&rsquo; property name.</p>
15621470
</div>
15631471

1472+
<div>
1473+
<h2 id=serialization><span class=secno>7. </span>Serialization</h2>
1474+
1475+
<p>This section describes the serialization of all new properties and
1476+
value types introduced in this specification.</p>
1477+
1478+
<div>
1479+
<h3 id=serializing-gradients><span class=secno>7.1. </span>Serializing
1480+
Gradients</h3>
1481+
1482+
<p>To serialize a linear gradient, let s initially be the empty string,
1483+
run these steps, and then return s:</p>
1484+
1485+
<ol>
1486+
<li>Append "linear-gradient(" to s.
1487+
1488+
<li>
1489+
<ul>
1490+
<li>If the first argument to the gradient function was a single
1491+
keyword, serialize the keyword and append it to s.
1492+
1493+
<li>Otherwise, if the first argument to the gradient function was two
1494+
keywords, serialize both keywords. Append them, separated by a space
1495+
" ", to s.
1496+
1497+
<li>Otherwise, if the first argument to the gradient function was an
1498+
&lt;angle>, serialize the &lt;angle> and append it to s.
1499+
1500+
<li>Otherwise, append "top" to s.
1501+
</ul>
1502+
1503+
<li>If the first argument to the gradient function was not a
1504+
color-stop, append a comma and a space ", " to s.
1505+
1506+
<li>For each color-stop in the gradient, do the following:
1507+
<ol>
1508+
<li>Serialize the &lt;color>, and append it to s.
1509+
1510+
<li>If a &lt;length> or &lt;percentage> was specified, append a space
1511+
" " to s, then serialize the &lt;length> or &lt;percentage> and
1512+
append it to s.
1513+
1514+
<li>If this is not the final color-stop, append a comma and a space
1515+
", " to s.
1516+
</ol>
1517+
1518+
<li>Append a close parenthesis ")" to s.
1519+
</ol>
1520+
1521+
<p>To serialize a radial gradient, let s initially be the empty string,
1522+
run these steps, and then return s:</p>
1523+
1524+
<ol>
1525+
<li>Append "radial-gradient(" to s.
1526+
1527+
<li>If a &lt;bg-position> was specified in the first argument to the
1528+
gradient function, serialize it and append it to s. Otherwise, append
1529+
"center" to s.
1530+
1531+
<li>Append a comma and a space ", " to s.
1532+
1533+
<li>
1534+
<ul>
1535+
<li>If a &lt;shape> and/or &lt;size> was specified in the second
1536+
argument to the gradient function:
1537+
<ol>
1538+
<li>If a &lt;shape> was specified, serialize it as a keyword and
1539+
append it to s. Otherwise, append "ellipse" to s.
1540+
1541+
<li>Append a space " " to s.
1542+
1543+
<li>If a &lt;size> was specified, serialize it as a keyword and
1544+
append it to s. Otherwise, append "cover" to s.
1545+
</ol>
1546+
1547+
<li>Otherwise, if two &lt;length>s or &lt;percentage>s were specified
1548+
in the second argument to the gradient function:
1549+
<ol>
1550+
<li>Serialize the first &lt;length> or &lt;percentage> and append
1551+
it to s.
1552+
1553+
<li>Append a space " " to s.
1554+
1555+
<li>Serialize the second &lt;length> or &lt;percentage> and append
1556+
it to s.
1557+
</ol>
1558+
1559+
<li>Otherwise, append "ellipse cover" to s.
1560+
</ul>
1561+
1562+
<li>Append a comma and a space ", " to s.
1563+
1564+
<li>For each color-stop in the gradient, do the following:
1565+
<ol>
1566+
<li>Serialize the &lt;color>, and append it to s.
1567+
1568+
<li>If a &lt;length> or &lt;percentage> was specified, append a space
1569+
" " to s, then serialize the &lt;length> or &lt;percentage> and
1570+
append it to s.
1571+
1572+
<li>If this is not the final color-stop, append a comma and a space
1573+
", " to s.
1574+
</ol>
1575+
1576+
<li>Append a close parenthesis ")" to s.
1577+
</ol>
1578+
</div>
1579+
</div>
1580+
15641581
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
15651582

15661583
<h2 class=no-num id=references>References</h2>

‎css3-images/Overview.src.html‎

Lines changed: 64 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -420,65 +420,6 @@ <h3 id=color-stop-syntax><code>color-stop</code> Syntax</h3>
420420
<p class=note>It is recommended that authors not mix different types of units, such as px, em, or %, in a single rule, as this can cause a color-stop to unintentionally try to move before an earlier one. For example, the rule <code>background-image: linear-gradient(red, yellow 100px, blue 50%)</code> would work as expected as long as the background area is at least 200px tall. If it was 150px tall, however, the blue color-stop's position would be equivalent to "75px", which precedes the yellow color-stop, and would be corrected to a position of 100px.</p>
421421
</div>
422422

423-
<div>
424-
<h3 id="serializing-gradients">Serializing Gradients</h3>
425-
<p>To serialize a linear gradient, let s initially be the empty string, run these steps, and then return s:</p>
426-
<ol>
427-
<li>Append "linear-gradient(" to s.</li>
428-
<li>
429-
<ul>
430-
<li>If the first argument to the gradient function was a single keyword, serialize the keyword and append it to s.</li>
431-
<li>Otherwise, if the first argument to the gradient function was two keywords, serialize both keywords. Append them, separated by a space " ", to s.</li>
432-
<li>Otherwise, if the first argument to the gradient function was an &lt;angle>, serialize the &lt;angle> and append it to s.</li>
433-
<li>Otherwise, append "top" to s.</li>
434-
</ul>
435-
</li>
436-
<li>If the first argument to the gradient function was not a color-stop, append a comma and a space ", " to s.</li>
437-
<li>For each color-stop in the gradient, do the following:
438-
<ol>
439-
<li>Serialize the &lt;color>, and append it to s.</li>
440-
<li>If a &lt;length> or &lt;percentage> was specified, append a space " " to s, then serialize the &lt;length> or &lt;percentage> and append it to s.</li>
441-
<li>If this is not the final color-stop, append a comma and a space ", " to s.</li>
442-
</ol>
443-
</li>
444-
<li>Append a close parenthesis ")" to s.</li>
445-
</ol>
446-
<p>To serialize a radial gradient, let s initially be the empty string, run these steps, and then return s:</p>
447-
<ol>
448-
<li>Append "radial-gradient(" to s.</li>
449-
<li>If a &lt;bg-position> was specified in the first argument to the gradient function, serialize it and append it to s. Otherwise, append "center" to s.</li>
450-
<li>Append a comma and a space ", " to s.</li>
451-
<li>
452-
<ul>
453-
<li>If a &lt;shape> and/or &lt;size> was specified in the second argument to the gradient function:
454-
<ol>
455-
<li>If a &lt;shape> was specified, serialize it as a keyword and append it to s. Otherwise, append "ellipse" to s.</li>
456-
<li>Append a space " " to s.</li>
457-
<li>If a &lt;size> was specified, serialize it as a keyword and append it to s. Otherwise, append "cover" to s.</li>
458-
</ol>
459-
</li>
460-
<li>Otherwise, if two &lt;length>s or &lt;percentage>s were specified in the second argument to the gradient function:
461-
<ol>
462-
<li>Serialize the first &lt;length> or &lt;percentage> and append it to s.</li>
463-
<li>Append a space " " to s.</li>
464-
<li>Serialize the second &lt;length> or &lt;percentage> and append it to s.</li>
465-
</ol>
466-
</li>
467-
<li>Otherwise, append "ellipse cover" to s.</li>
468-
</ul>
469-
</li>
470-
<li>Append a comma and a space ", " to s.</li>
471-
<li>For each color-stop in the gradient, do the following:
472-
<ol>
473-
<li>Serialize the &lt;color>, and append it to s.</li>
474-
<li>If a &lt;length> or &lt;percentage> was specified, append a space " " to s, then serialize the &lt;length> or &lt;percentage> and append it to s.</li>
475-
<li>If this is not the final color-stop, append a comma and a space ", " to s.</li>
476-
</ol>
477-
</li>
478-
<li>Append a close parenthesis ")" to s.</li>
479-
</ol>
480-
</div>
481-
482423
<div>
483424
<h3 id="interpolating-gradients">Interpolating Gradients</h3>
484425
<p>Gradient images can be interpolated directly in CSS transitions and animations, smoothly animating from one gradient to another. There are only a few restrictions on what gradients are allowed to be interpolated:</p>
@@ -835,6 +776,70 @@ <h3 id="object-position">The 'object-position' Property</h3>
835776

836777
</div>
837778

779+
<div>
780+
<h2>Serialization</h2>
781+
<p>This section describes the serialization of all new properties and value types introduced in this specification.</p>
782+
783+
<div>
784+
<h3 id="serializing-gradients">Serializing Gradients</h3>
785+
<p>To serialize a linear gradient, let s initially be the empty string, run these steps, and then return s:</p>
786+
<ol>
787+
<li>Append "linear-gradient(" to s.</li>
788+
<li>
789+
<ul>
790+
<li>If the first argument to the gradient function was a single keyword, serialize the keyword and append it to s.</li>
791+
<li>Otherwise, if the first argument to the gradient function was two keywords, serialize both keywords. Append them, separated by a space " ", to s.</li>
792+
<li>Otherwise, if the first argument to the gradient function was an &lt;angle>, serialize the &lt;angle> and append it to s.</li>
793+
<li>Otherwise, append "top" to s.</li>
794+
</ul>
795+
</li>
796+
<li>If the first argument to the gradient function was not a color-stop, append a comma and a space ", " to s.</li>
797+
<li>For each color-stop in the gradient, do the following:
798+
<ol>
799+
<li>Serialize the &lt;color>, and append it to s.</li>
800+
<li>If a &lt;length> or &lt;percentage> was specified, append a space " " to s, then serialize the &lt;length> or &lt;percentage> and append it to s.</li>
801+
<li>If this is not the final color-stop, append a comma and a space ", " to s.</li>
802+
</ol>
803+
</li>
804+
<li>Append a close parenthesis ")" to s.</li>
805+
</ol>
806+
<p>To serialize a radial gradient, let s initially be the empty string, run these steps, and then return s:</p>
807+
<ol>
808+
<li>Append "radial-gradient(" to s.</li>
809+
<li>If a &lt;bg-position> was specified in the first argument to the gradient function, serialize it and append it to s. Otherwise, append "center" to s.</li>
810+
<li>Append a comma and a space ", " to s.</li>
811+
<li>
812+
<ul>
813+
<li>If a &lt;shape> and/or &lt;size> was specified in the second argument to the gradient function:
814+
<ol>
815+
<li>If a &lt;shape> was specified, serialize it as a keyword and append it to s. Otherwise, append "ellipse" to s.</li>
816+
<li>Append a space " " to s.</li>
817+
<li>If a &lt;size> was specified, serialize it as a keyword and append it to s. Otherwise, append "cover" to s.</li>
818+
</ol>
819+
</li>
820+
<li>Otherwise, if two &lt;length>s or &lt;percentage>s were specified in the second argument to the gradient function:
821+
<ol>
822+
<li>Serialize the first &lt;length> or &lt;percentage> and append it to s.</li>
823+
<li>Append a space " " to s.</li>
824+
<li>Serialize the second &lt;length> or &lt;percentage> and append it to s.</li>
825+
</ol>
826+
</li>
827+
<li>Otherwise, append "ellipse cover" to s.</li>
828+
</ul>
829+
</li>
830+
<li>Append a comma and a space ", " to s.</li>
831+
<li>For each color-stop in the gradient, do the following:
832+
<ol>
833+
<li>Serialize the &lt;color>, and append it to s.</li>
834+
<li>If a &lt;length> or &lt;percentage> was specified, append a space " " to s, then serialize the &lt;length> or &lt;percentage> and append it to s.</li>
835+
<li>If this is not the final color-stop, append a comma and a space ", " to s.</li>
836+
</ol>
837+
</li>
838+
<li>Append a close parenthesis ")" to s.</li>
839+
</ol>
840+
</div>
841+
</div>
842+
838843
<h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
839844

840845
<h2 class="no-num" id="references">References</h2>

0 commit comments

Comments
 (0)