Ajaxian

Tuesday, April 22nd, 2008

Now your mobile phones get to take some Acid

Category: Mobile, Standards

Dominique Hazaël-Massieux, co-chair of the Mobile Web Test Suites Working Group at the W3C, has published a test in the spirit of the ACID tests: Web Compatibility Test for Mobile Browsers:

That test, in the same spirit as the ACID tests, combines in a single page tests for 12 Web technologies, ranging from well-deployed (but often poorly implemented on mobile devices) technologies such as HTTPS and PNG, to technologies we believe will matter in a year or two (like SVG animation and CSS Media Queries).

Tests are visualized by squares, sorted roughly in order of difficulty (first line, well-deployed technologies, second line, technologies increasingly used today, third line, technologies for tomorrow), and a browser needs to render each square in the same tone of green to pass completely the test - which as far as I know, no currently released browser (on mobile devices or elsewhere) does.

The test covers:

1. CSS2 min-width

Fluid page widths, defined in percent of the screen width, often depend on the min-width and max-width properties to avoid turning unreadable on small screens. The former property is tested here.

2. Transparent PNG

PNG, a bitmap image format, supports transparency and alpha channels, that are useful in building appealing visual effects

3. GZIP support

The HTTP protocol allows data to be sent gzip-compressed when the client advertizes its capability to uncompress them (through the Accept-Encoding header), thus saving bandwith.

4. HTTPS

The HTTPS protocol is used to establish secure and encrypted connections on the Web.

5. iframe inclusing of XHTML-served-as-XML content

Tests if the UA supports XML content-types by loading an XHTML document with the content-type application/xhtml+xml.

6. Static SVG

SVG allows authors to define vector-based graphics, that can be scaled up and down, fitting well the needs of mobile devices

7. XMLHTTPRequest

XMLHTTPRequest is at the core of AJAX, allowing to update a subset of an HTML page without requesting a new full content transfer

8. CSS Media Queries

CSS Media Queries allow authors to contrain CSS rules apply in specific context, for instance so that they only apply to screens of a given maximum width. The min-width feature is tested here.

9. Dynamic SVG

SVG also supports animations, that can be used to create very appealing interfaces

10. The canvas element

The canvas element defined in HTML5 offers a Javascript graphics API

11. contenteditable

The contenteditable attribute makes rich text editing of any element possible. Support for this attribute is tested.

12. CSS3 selectors

CSS3 introduces a number of new selectors, allowing more fine-grained styling, leading to better layouts. The nth-child() selector is tested here.

Here are some of the browsers running the actual test:

The team is looking for other tests, so leave a comment with your thoughts!

Posted by Dion Almaer at 1:20 am