RE: [css3-images] RE: first IE10 preview has gradients

> From: Alan Gresley [mailto:alan@css-class.com]
> > For some in-house testing, I've found decomposing the gradients
> useful.
> 
> Can you explain what decomposing is please?

Basically, I meant splitting the different aspects of the gradient into individual tests.  {Size/Shape, Direction}, {Number of Stops}, {Color Interpolation Coordinate Space}, {Color Interpolation Quality}, etc.

Additionally, for some of the features exposed by the syntax this approach needs to be taken for the parser as well as for the renderer.

Verifying that rules such as this one...
# If only one argument is provided before the color-stops, and
# it could be interpreted as either a position or an explicit
# size (for example, in 'radial-gradient(10% 10%, red, blue)'),
# it must be interpreted as a position.
... are handled correctly, often requires multiple tests because I found often that sometimes you "accidentally" get the correct rendering even though it was parsed incorrectly.

For example, these two cases render the same:

<!doctype html>
<style>
div {
	width: 100px;
	height: 100px;
	background-image: -ms-radial-gradient(50% 50%, ellipse cover, red, blue 50px);
	border: 1px solid black;
	margin: 20px;
}
div:nth-child(2) {
	background-image: -ms-radial-gradient(center, 50% 50%, red, blue 50px);
}
</style>
<div></div>
<div></div>


The first div represents the spec interpretation of
	background-image: -ms-radial-gradient(50% 50%, red, blue 50px);
while the second div represents an alternate, spec-non-compliant, interpretation.


> > background-image: linear-gradient(37deg, rgba(254,0,0,0.5),
> > rgba(254,0,0,0.5) 50%, rgba(0,0,254,0.5) 50%),
> > linear-gradient(217deg, rgb(254,0,0), rgb(254,0,0) 50%,
> >rgb(0,0,254) 50%);
> >
...
> I will test your methods. One question, why rgb(254,0,0) instead of
> rgb(255,0,0)? Is this to do with the midway point? I claim that the
> midway point or halfway between 'white' and 'black' is
> rgb(127,127,127),

My original test started with 255 instead of 254, but I ran into the problem that the reference art couldn't be a simple background-color because rgb syntax doesn't support fractional values.  So I opted to just lower to 254 for simplicity.

In retrospect, I could have "cheated" by using alpha in my background-color to address the reference art issue.

> > To test fidelity / quality of gradient, keep it simple and wide:
> > div {
> >    height: 10px;
> >    width: 1000px;
> >    background-image: linear-gradient(left, red, blue);
> > }
> 
> Wouldn't something with multiples of 255px be better? Having non
> multiples of 255px may be the cause of banding.

I probably should have been clearer here.  Showing bands that are like 5-10px wide here is acceptable, IMO.  What I was seeing in some cases was MUCH larger bands (20-50px), which I found concerning.

Your point stands though, choosing a width "mathematically friendlier" than 1000px is probably a good idea.  I would use 1020px (255 x 4) though so we keep the same level "stress test" on the renderer.

> > Combining all of these together makes for really interesting
> > test cases that are good for comparative purposes -- and fun
> > -- but are often more difficult to translate easily into
> >pass / fail test suite cases then the one-dimensional tests.
> 
> This make me more afraid. How do you test 2D or 3D? These all need to
> be
> broken into components.

I've looked only briefly at rotations so far.

Received on Wednesday, 13 April 2011 17:21:46 UTC