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

I must admit I'm a bit baffled by what your first example has to do with gradients.

Moving on...

For your second example, I thought test suite entries are only supposed to include conformant syntax.

I see the following issues in your example:
1. The webkit syntax you've included (which I think is Chrome 11 and Safari friendly) isn't conformant with the current spec.  Fortunately, Chrome 11 appears to be more in line with the W3C spec so switching to that works for Chrome but apparently not for Safari.
2. If prefixes are allowed in the test suite, should probably add -o- for Opera to your prefix flavors.
3. I think you meant IE10 preview, not IE9 preview.  ;)
4. You assert that FF and IE have the same rendering here.  In fact, they do not; the IE Preview isn't using premultiplied for interpolation.  Nonetheless, that aside I believe FF likely has a similar rendering (I don't have FF on this machine).

Ok, enough with the nits.


You asked how to make a test case out of it, which is a good question.


For some in-house testing, I've found decomposing the gradients useful.


To test size and shape (radial) and direction (linear), I force "hard transitions" between colors.
background-image: linear-gradient(37deg, red, red 50%, blue 50%);

Using this method is very helpful in validating whether or not the angle linear gradients are behaving as expected.  With "more normal" (i.e. not hard transition) gradients, it's often harder to see the differences between browsers.


To test color transition consistency, using opposite gradients is helpful:

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%);

Ideally, this should produce a solid color but as you play with the size of the element (or apply transforms) the color sometimes starts to shift as rounding effects come in to play.


To test fidelity / quality of gradient, keep it simple and wide:
div {
  height: 10px;
  width: 1000px;
  background-image: linear-gradient(left, red, blue);
}

I see a lot of color banding in Chrome in some of my test cases.  Like noticeably lower quality rendering.  That's somewhat concerning for a desktop browser, though totally makes sense for a phone browser.  IMO, at least.


Then there's testing how many stops you can fit in before the implementation cries "Uncle!"  Also, how they deal with such scenarios is interesting as well.  Do you just not render the gradient?  Do you render an approximation (as many stops as you can fit given your underlying rendering technology)?  Do you reject the syntax as parse time?  Do you accept it and render a completely different, unexpected gradient?


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.


-Brian


-----Original Message-----
From: Alan Gresley [mailto:alan@css-class.com] 
Sent: Wednesday, April 13, 2011 12:43 AM
To: Brian Manthos
Cc: www-style list
Subject: Re: [css3-images] RE: first IE10 preview has gradients

On 13/04/2011 3:10 PM, Brian Manthos wrote:
> The gradients portion of the spec feels pretty solid -- although
> there are still of number of completeness issues in the various
> implementations, unfortunately.
>
> As with IE9 previews, feedback is welcome -- but please try to keep
> it below ear-piercing levels.  ;)


It took me 10 minutes to file this bug.

https://bugzilla.mozilla.org/show_bug.cgi?id=649577

It would be nice if this was the same with Microsoft.


> BTW... Is there a test suite for CSS3 Images, or are we currently at
> zero tests for CSS3 Gradients feature?
>
> -Brian


There is a testsuite for CSS3 but I don't know if that includes CSS3 Images.

Anyway, how would one create a test case out of the below? How would one 
know if it passes? FF3.6~4.0 and IE9 preview renders the same. Safari 
should if it used the newer syntax.


<!DOCTYPE html>

<style type="text/css">
div {
   height: 200px; width: 200px;
   -moz-border-radius: 100px 100px;
   border-radius: 100px 100px;
   background: #385179;
   background: #385BE1 -webkit-gradient(radial, 125 125, 0, 125 125, 
150, from(rgba(255,255,255,1)), to(rgba(56,91,225,0))) -50px -50px 
no-repeat;
   background: #385BE1 -moz-radial-gradient(rgba(255,255,255,1), 
rgba(56,91,225,0)) -50px -50px no-repeat;
   background: #385BE1 -ms-radial-gradient(rgba(255,255,255,1), 
rgba(56,91,225,0)) -50px -50px no-repeat;
   background: #385BE1 radial-gradient(rgba(255,255,255,1), 
rgba(56,91,225,0)) -50px -50px no-repeat;
   -moz-background-size: 250px 250px;
   background-size: 250px 250px;
}
</style>

<div></div>




-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Wednesday, 13 April 2011 08:26:52 UTC