Skip to content

Commit 5019f89

Browse files
committed
[css-values-4] Punt mix() to Values 5 #9343
1 parent 6089e24 commit 5019f89

File tree

1 file changed

+0
-122
lines changed

1 file changed

+0
-122
lines changed

css-values-4/Overview.bs

Lines changed: 0 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -552,128 +552,6 @@ Combining Values: Interpolation, Addition, and Accumulation</h2>
552552
If a value type does not define a specific procedure for <a>accumulation</a>,
553553
its <a>accumulation</a> operation is identical to <a>addition</a>.
554554

555-
<!--
556-
██ ██ ████ ██ ██ ███ ███
557-
███ ███ ██ ██ ██ ██ ██
558-
████ ████ ██ ██ ██ ██ ██
559-
██ ███ ██ ██ ███ ██ ██
560-
██ ██ ██ ██ ██ ██ ██
561-
██ ██ ██ ██ ██ ██ ██
562-
██ ██ ████ ██ ██ ███ ███
563-
-->
564-
565-
<h3 id="interpolate">
566-
Representing Interpolated Values: the ''mix()'' notation</h3>
567-
568-
[=Interpolation=] of two values can be represented
569-
by the <dfn>mix()</dfn> [=functional notation=],
570-
whose syntax is defined as follows:
571-
572-
<pre class="prod">
573-
&lt;mix()> = mix( <<percentage>> ';' <<declaration-value>>? ';' <<declaration-value>>? )
574-
</pre>
575-
576-
<dl dfn-for="mix()">
577-
<dt><dfn value><<percentage>></dfn>
578-
<dd>
579-
Represents the interpolation progress between the two values.
580-
581-
<dt><dfn value><<declaration-value>></dfn>
582-
<dd>
583-
The first <<declaration-value>> represents
584-
the value at the “start” (0%) of the interpolation range,
585-
interpreted as a value for the property this function is used in.
586-
587-
The second <<declaration-value>> represents
588-
the value at the “end” (100%) of the interpolation range,
589-
interpreted the same.
590-
591-
Either value can be omitted,
592-
to refer to an empty value
593-
(this is valid in [=custom properties=], such as ''--foo:;'').
594-
The separating '';'' cannot be omitted;
595-
for example, a ''mix()'' with an empty starting value
596-
would be written like ''mix(50%;;bar)''.
597-
</dl>
598-
599-
Note: This [=functional notation=] uses semicolons to separate arguments
600-
rather than the more typical comma
601-
because the values themselves can contain commas.
602-
603-
604-
If the two <<declaration-value>>s in ''mix()'' are [=interpolation|interpolable=]
605-
as values for the property in which it is specified,
606-
and the interpolated value can be represented without ''mix()'',
607-
the [=computed value=] of ''mix()'' is
608-
the result of interpolating these two values
609-
to the progress given by the <<percentage>>.
610-
Otherwise,
611-
the [=computed value=] of ''mix()'' is
612-
the ''mix()'' [=functional notation=] itself
613-
with its <<percentage>> computed
614-
and both <<declaration-value>>s computed
615-
as values for this property.
616-
617-
<div class="example">
618-
For example, most uses of ''mix()''
619-
will resolve at computed-value time:
620-
621-
<pre>
622-
color: mix(90%; red; blue);
623-
/* via simple interpolation,
624-
computes to: */
625-
color: rgb(10% 0 90%);
626-
627-
color: mix(90%; currentcolor; black);
628-
/* can't be fully resolved at computed-value time,
629-
but still has a defined representation: */
630-
color: color-mix(currentcolor 90%, black 10%);
631-
632-
float: mix(90%; left; right);
633-
/* discretely animatable */
634-
float: right;
635-
</pre>
636-
637-
But a few cases don't have an intermediate representation:
638-
639-
<pre>
640-
transform: mix(90%; translate(calc(1em + 50%)); rotate(30deg));
641-
/* because functions don't match, it will interpolate
642-
via matrix(). But translate(%) needs layout
643-
information to turn into a matrix(), so the
644-
interpolated value can't actually be represented.
645-
Computes to: */
646-
transform: mix(90%; translate(calc(16px + 50%)); rotate(30deg));
647-
</pre>
648-
</div>
649-
650-
A ''mix()'' notation is invalid
651-
if it is not the sole value of the property;
652-
if either of its <<declaration-value>>s
653-
are invalid when specified as the entire value
654-
for the property the function is used in;
655-
or if the property using it is [=not animatable=].
656-
657-
<div class="example">
658-
For example, the following declarations are invalid,
659-
and will be ignored:
660-
661-
<pre>
662-
/* Invalid start value */
663-
color: mix(90% ; #invalid ; #F00);
664-
665-
/* Function is mixed with other values */
666-
background: url(ocean) mix(10% ; blue ; yellow);
667-
668-
/* 'animation-*' is not animatable */
669-
animation-delay: mix(0% ; 0s ; 2s);
670-
</pre>
671-
</div>
672-
673-
Progress values below ''0%'' and above ''100%'' are valid;
674-
they represent interpolation beyond the range represented
675-
by the start and end values.
676-
677555
<h3 id="combining-range">
678556
Range Checking</h3>
679557

0 commit comments

Comments
 (0)