@@ -552,128 +552,6 @@ Combining Values: Interpolation, Addition, and Accumulation</h2>
552
552
If a value type does not define a specific procedure for <a>accumulation</a> ,
553
553
its <a>accumulation</a> operation is identical to <a>addition</a> .
554
554
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
- <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
-
677
555
<h3 id="combining-range">
678
556
Range Checking</h3>
679
557
0 commit comments