[css-images-4] minor error in Conic Gradients example

[faceless2]

The image in example 17 doesn't match the CSS used to create it.

• the order of colors in the conic gradient is reversed
• the radial gradient will not be transparent at the edge of the circle; the radius is based on the diagonal of the box, so it's about 106px, not 75px.

To match the image, change the background property in the CSS to:

background: radial-gradient(gray, transparent 70.7%),
            conic-gradient(red, magenta, blue, aqua, lime, yellow, red);

[tabatkins]

the radial gradient will not be transparent at the edge of the circle; the radius is based on the diagonal of the box, so it's about 106px, not 75px.

This isn't true; per https://drafts.csswg.org/css-images-3/#radial-color-stops, the gradient ray starts at the center of the gradient shape and extends to the right, so 100% exactly hits the gradient shape.

SVG gradients use the diagonal, but CSS gradients work more sensibly. ^_^

[tabatkins]

And it looks like the color list has been fixed now, so I'm going to go ahead and close this, thanks!

[faceless2]

Whoops, sorry Tab - I missed that. Chrome 69 is using the diagonal FWIW.

[tabatkins]

Oh gosh, sorry, I'm forgetting how my own spec works.

Chrome isn't using the diagonal, but it is correctly using the default gradient-shape size of "farthest-corner", which sizes the gradient shape so that 100% is at the corner. So yeah, the spec example is wrong and needs to specify closest-side.

[tabatkins]

(You can tell what direction it's measuring in by using a non-square rectangle and a px value; the stops will be displayed at the specified distance measured from the center rightward, while measuring upward or diagonally will give different lengths than what you specified.)

[svgeesus]

The image in example 17 doesn't match the CSS used to create it.

This is now example 25, further demonstration that examples should have meaningful IDs.

So yeah, the spec example is wrong and needs to specify closest-side

I can do that trivial edit