Web Compatibility Test for Mobile Browsers

The Web Compatibility Test for Mobile Browsers combines in a single page a number of Web technologies that we believe are the foundation for a better Web experience, especially on mobile devices.

Using a very visual scheme of a set of squares whose color depend on the proper implementation of a given technology, it helps assess at a glance where a given browser might be lacking to support this improved Web experience.

Accessing it

The test is available at:

its canonical URI: http://dev.w3.org/2008/mobile-test/test.html
a shortened URI: http://tinyurl.com/37e33p
through a QR code:

Tested Technologies

The squares are roughly sorted by order of difficulty: the first row tests "baseline" technologies, the second row corresponds to technologies that are already widely used today, and the third row tests for support of technologies that we believe will be important in the near future.

Map of the included tests

The following technologies are tested as of today:

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.

Dominique Hazaël-Massieux