Media Queries Test Suite Generator

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|

Media Queries Test Suite Generator

Lachlan Hunt

Hi,
   Over the past few weeks I've been working with Anne van Kesteren to
develop an a media queries test suite generator that would accept the
actual UA/device values as parameters and generate appropriate test
cases.  It's not quite finished, but it's usable and will actually
generate XHTML 1.1 test cases for all CSS 2/2.1 media types and for each
media feature.

It works by specifying the device and supplying the device's actual
values for each feature (if applicable).  It will then generate a list
of tests based on the supplied values and for each test case, determine
whether the UA should apply the styles or not, in order to output the
the correct pass condition.

For convenience in UAs that support script, the form will be
automatically filled with all the values that the script can determine.

http://lachy.id.au/dev/css/tests/css3-mediaqueries/special/generator

The tests use both red/green as well as stating PASS or FAIL as that
seems to be the most device independent way of indicating success or
failure.

The area that still need to be worked on the most is the actual test
values that get generated for each feature, particularly
device-aspect-ratio.  There was also an idea to generate a file name
that conforms with the CSS test suite guidelines and send a
Content-Disposition header with that value, so that users can easily
save the tests with sensible file names, but that's not implemented yet
either.

Let me know if you find any bugs.

--
Lachlan Hunt
http://lachy.id.au/


Reply | Threaded
Open this post in threaded view
|

Re: Media Queries Test Suite Generator

Bert Bos

On Sunday 20 November 2005 04:29, Lachlan Hunt wrote:

> http://lachy.id.au/dev/css/tests/css3-mediaqueries/special/generator

> Let me know if you find any bugs.

Nice!

One bug:

The tests include

    ... and (width) {...}

which is fine, but they also include

    ... and (max-width) {...}

The former is defined, it means the same as '(min-width: 1)', but the
latter is not legal, because 'max-width' isn't a media feature.

It is OK to include the test, but it can never match any UA. Expressions
with unknown media features always fail.



And some feature requests:

The tests don't test the keywords 'not' and 'only, e.g.:

    @media not screen {...}
    @media not screen and (monochrome) {...}
    @media only screen {...]

They also don't test the comma (,):

    @media ignore-this, screen {...}
    @media screen, print {...}
    @media screen and (min-width: 61), screen and (max-width: 59) {...}



Bert
--
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  [hidden email]                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Reply | Threaded
Open this post in threaded view
|

Re: Media Queries Test Suite Generator

Anne van Kesteren-2

On Mon, 21 Nov 2005 11:50:43 +0100, Bert Bos <[hidden email]> wrote:

>> http://lachy.id.au/dev/css/tests/css3-mediaqueries/special/generator
>
>> Let me know if you find any bugs.
>
> Nice!
>
> One bug:
>
> The tests include
>
>     ... and (width) {...}
>
> which is fine, but they also include
>
>     ... and (max-width) {...}
>
> The former is defined, it means the same as '(min-width: 1)', but the
> latter is not legal, because 'max-width' isn't a media feature.

I would like to see that clarified that in the draft then. (I made the  
test.) The syntax seems ambigious at best:
  <http://www.w3.org/TR/css3-mediaqueries/#syntax>

It seems to define 'max-width' as a media feature quite clearly.


> It is OK to include the test, but it can never match any UA. Expressions
> with unknown media features always fail.

We should probably add some tests to that effect, thanks.

Kind regards,

Anne


--
Anne van Kesteren
<http://annevankesteren.nl/>
<http://www.opera.com/>


Reply | Threaded
Open this post in threaded view
|

Re: Media Queries Test Suite Generator

Anne van Kesteren-2

On Mon, 21 Nov 2005 11:55:53 +0100, Anne van Kesteren <[hidden email]>  
wrote:
> I would like to see that clarified that in the draft then. (I made the  
> test.) The syntax seems ambigious at best:
>   <http://www.w3.org/TR/css3-mediaqueries/#syntax>
>
> It seems to define 'max-width' as a media feature quite clearly.

In addition, how many implementors treat 'max-width' as not a feature and  
'width' as a feature? Internal builds of Opera treat both as a feature.  
(Per syntax.)

I'm also unsure if we treat 'width' as 'min-width:0' or just as "feature  
checking". I assume the latter, but it's hard to test :-)


--
Anne van Kesteren
<http://annevankesteren.nl/>
<http://www.opera.com/>


Reply | Threaded
Open this post in threaded view
|

Re: Media Queries Test Suite Generator

Anne van Kesteren-2

On Mon, 21 Nov 2005 12:02:05 +0100, Anne van Kesteren <[hidden email]>  
wrote:
> I'm also unsure if we treat 'width' as 'min-width:0' or just as "feature  
> checking". I assume the latter, but it's hard to test :-)

Actually,  
<http://lachy.id.au/dev/css/tests/css3-mediaqueries/special/test?device=screen&feature=grid&grid=0>  
gives the answer. Currently the first results says "FAIL" because we  
return false for the "grid" feature. But for "grid:0" we return true as we  
do not support it in this mode and therefore that test says "PASS" (as do  
all the others).

So I guess we really treat it as feature checking then. (Which makes sort  
of sense to me too.)


--
Anne van Kesteren
<http://annevankesteren.nl/>
<http://www.opera.com/>


Reply | Threaded
Open this post in threaded view
|

Re: Media Queries Test Suite Generator

Bert Bos
In reply to this post by Anne van Kesteren-2

On Monday 21 November 2005 11:55, Anne van Kesteren wrote:

> I would like to see that clarified that in the draft then. (I made
> the test.) The syntax seems ambigious at best:
>   <http://www.w3.org/TR/css3-mediaqueries/#syntax>
>
> It seems to define 'max-width' as a media feature quite clearly.

Section 6 says that
1) media-features can be used without a value,
2) the media features are 'width', 'height'... 'grid',
3) 'width' accepts min-/max- prefixes.

From that I conclude that 'max-width' is a media feature with a prefix
and not a media feature, and thus must be used *with* a value.

That makes sense, because it is unclear what an expression such as
screen and (max-width)' would mean.

Assuming that the non-terminal "media_feature" in section 5 is meant to
list the same media features as section 6, it seems the spec indeed
needs some improvement. I'll raise it as an issue in the CSS WG.



Bert
--
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  [hidden email]                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Reply | Threaded
Open this post in threaded view
|

Re: Media Queries Test Suite Generator

Anne van Kesteren-2

On Mon, 21 Nov 2005 13:36:34 +0100, Bert Bos <[hidden email]> wrote:
> That makes sense, because it is unclear what an expression such as
> screen and (max-width)' would mean.

In our implemention it currently means that an expression as "{media-type}  
and {feature}" ('min-*' and 'max-*' are features as per section 5) will  
return true when {feature} applies to the given {media-type}.

So "screen and (grid)" returns false but "screen and (grid:0)" returns  
true. And I assume "speech and (min-width)" will return false but I have  
not tested that.

Kind regards,

Anne van Kesteren


--
Anne van Kesteren
<http://annevankesteren.nl/>
<http://www.opera.com/>


Reply | Threaded
Open this post in threaded view
|

Re: Media Queries Test Suite Generator

Lachlan Hunt
In reply to this post by Bert Bos

Bert Bos wrote:

> On Sunday 20 November 2005 04:29, Lachlan Hunt wrote:
>> http://lachy.id.au/dev/css/tests/css3-mediaqueries/special/generator
>
> The tests include
>
>     ... and (width) {...}
>
> which is fine, but they also include
>
>     ... and (max-width) {...}
>
> The former is defined, it means the same as '(min-width: 1)', but the
> latter is not legal, because 'max-width' isn't a media feature.

I've fixed this for now, though, I too would like to see this clarified
in the spec.

> And some feature requests:
>
> The tests don't test the keywords 'not' and 'only, e.g.:
>
>     @media not screen {...}
>     @media not screen and (monochrome) {...}
>     @media only screen {...]

That should be easy to do when I have time.

> They also don't test the comma (,):
>
>     @media ignore-this, screen {...}
>     @media screen, print {...}
>     @media screen and (min-width: 61), screen and (max-width: 59) {...}

Seems a little harder given my current implementation, but still
possible.  Perhaps these kind of tests would be best generated with a
separate script, but I'll see how I go.

--
Lachlan Hunt
http://lachy.id.au/