8000 [css-images] Clean up the language around color hints, and remove con… · w3c/csswg-drafts@373d326 · GitHub
Skip to content

Commit 373d326

Browse files
tabatkinstabatkins
committed
[css-images] Clean up the language around color hints, and remove contradictory older text about colorless color stops.
1 parent 9bbf056 commit 373d326

2 files changed

Lines changed: 27 additions & 67 deletions

File tree

‎css-images/Overview.bs‎

Lines changed: 13 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -709,13 +709,11 @@ Gradient Color-Stops</h3>
709709
the position can be omitted in the syntax.
710710
(It gets automatically filled in by the user agent; see below for details.)
711711

712-
Some <a>color stops</a> don't have a color,
713-
only a position.
714-
A <a>color stop</a> like this is a <dfn>color interpolation hint</dfn>,
712+
Between two <a>color stops</a> there can be a <dfn local-title="color hint">color interpolation hint</dfn>,
715713
which specifies how the colors of the two <a>color stops</a> on either side
716714
should be interpolated in the space between them
717715
(by default, they interpolate linearly).
718-
There can only be at most one <a>color interpolation hint</a> between any two given normal <a>color stops</a>;
716+
There can only be at most one <a>color interpolation hint</a> between any two given <a>color stops</a>;
719717
using more than that makes the function invalid.
720718

721719
Color stops are organized into a <dfn export>color stop list</dfn>,
@@ -724,29 +722,27 @@ Gradient Color-Stops</h3>
724722
must have a color
725723
(though their position can be omitted).
726724

727-
<a>Color stops</a> are placed on a <a>gradient line</a>,
725+
<a>Color stops</a> and <a>color hints</a> are placed on a <a>gradient line</a>,
728726
which defines the colors at every point of a gradient.
729727
The gradient function defines the shape and length of the <a>gradient line</a>,
730728
along with its <a>starting point</a> and <a>ending point</a>.
731729

732-
<a>Color stops</a> must be specified in order.
730+
<a>Color stops</a> and <a>color hints</a> must be specified in order.
733731
Percentages refer to the length of the <a>gradient line</a> between the <a>starting point</a> and <a>ending point</a>,
734732
with 0% being at the starting point
735733
and 100% being at the ending point.
736734
Lengths are measured from the <a>starting point</a> in the direction of the <a>ending point</a> along the <a>gradient line</a>.
737735
Angles are measured with 0deg pointing up,
738736
and positive angles corresponding to clockwise rotations from there.
739737

740-
<a>Color stops</a> are usually placed between the <a>starting point</a> and <a>ending point</a>,
738+
<a>Color stops</a> and <a>color hints</a> are usually placed between the <a>starting point</a> and <a>ending point</a>,
741739
but that's not required;
742740
the gradient line extends infinitely in both directions,
743-
and a <a>color stop</a> can be placed at any position on the <a>gradient line</a>.
741+
and a <a>color stop</a> or <a>color hint</a> can be placed at any position on the <a>gradient line</a>.
744742

745743
A <a>color stop</a> with two locations is mostly equivalent
746744
to specifying two <a>color stops</a> with the same color,
747745
one for each position.
748-
However, if the color is omitted,
749-
it's treated as a single <a>color stop</a> by step 4 in the clean-up algorithm below.
750746
<span class='note'>Specifying two locations makes it easier to create solid-color "stripes" in a gradient,
751747
without having to repeat the color twice.</span>
752748

@@ -756,17 +752,9 @@ Gradient Color-Stops</h3>
756752
If multiple stops in a row lack a position,
757753
they space themselves out equally.
758754

759-
Similarly, the color of a <a>color stop</a> can be omitted.
760-
The causes the <em>color</em> to be automatically computed
761-
to halfway between the two surrounding stops,
762-
so that the "midpoint" of a transition can be easily adjusted.
763-
If multiple stops in a row lack a color,
764-
they space themselves out equally in "color space",
765-
giving more control over the smoothness of the transition.
766-
767-
The following steps must be applied <em>in order</em> to process the list of <a>color stops</a>.
755+
The following steps must be applied <em>in order</em> to process the <<color-stop-list>>.
768756
After applying these rules,
769-
all <a>color stops</a> will have a definite position and color
757+
all <a>color stops</a> and <a>color hints</a> will have a definite position and color (if appropriate)
770758
and they will be in ascending order:
771759

772760
<ol>
@@ -777,21 +765,13 @@ Gradient Color-Stops</h3>
777765
set its position to 100%.
778766

779767
<li>
780-
If a <a>color stop</a> has a position that is less than the specified position of any <a>color stop</a> before it in the list,
781-
set its position to be equal to the largest specified position of any <a>color stop</a> before it.
768+
If a <a>color stop</a> or <a>color hint</a> has a position that is less than the specified position of any <a>color stop</a> or <a>color hint</a> before it in the list,
769+
set its position to be equal to the largest specified position of any <a>color stop</a> or <a>color hint</a> before it.
782770

783771
<li>
784772
If any <a>color stop</a> still does not have a position,
785773
then, for each run of adjacent <a>color stops</a> without positions,
786774
set their positions so that they are evenly spaced between the preceding and following <a>color stops</a> with positions.
787-
788-
<li>
789-
If any <a>color stop</a> does not have a color,
790-
then, for each run of adjacent <a>color stops</a> without colors,
791-
set their colors to be evenly spaced linear interpolations in premultiplied sRGBA space
792-
between the preceding and following <a>color stops</a> with colors.
793-
Note that a <a>color stop</a> with two positions is still counted as a single <a>color stop</a> by this step,
794-
so both positions will be assigned the same color.
795775
</ol>
796776

797777
<p class='issue'>
@@ -815,21 +795,21 @@ Gradient Color-Stops</h3>
815795
at 25%, 50%, or 75% of the distance between two <a>color stops</a>,
816796
the color is a 25%, 50%, or 75% blend of the colors of the two stops.
817797

818-
However, if a <a>color interpolation hint</a> was provided between two <a>color stops</a>,
798+
However, if a <a>color hint</a> was provided between two <a>color stops</a>,
819799
the interpolation is non-linear,
820800
and controlled by the hint:
821801

822802
<ol>
823803
<li>
824-
Determine the location of the hint as a percentage of the distance between the two <a>color stops</a>,
804+
Determine the location of the <a>color hint</a> as a percentage of the distance between the two <a>color stops</a>,
825805
denoted as a number between 0 and 1,
826806
where 0 indicates the hint is placed right on the first <a>color stop</a>,
827807
and 1 indicates the hint is placed right on the second <a>color stop</a>.
828808
Let this percentage be <var>H</var>.
829809

830810
<li>
831811
For any given point between the two color stops,
832-
determine the point's location as a percetnage of the distance between the two <a>color stops</a>,
812+
determine the point's location as a percentage of the distance between the two <a>color stops</a>,
833813
in the same way as the previous step.
834814
Let this percentage be <var>P</var>.
835815

0 commit comments

Comments
 (0)