Tuesday, April 22nd, 2008
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
- Fluid page widths, defined in percent of the screen width, often depend on the
max-widthproperties 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-Encodingheader), thus saving bandwith.
HTTPSprotocol is used to establish secure and encrypted connections on the Web.
iframeinclusing of XHTML-served-as-XML content
- Tests if the UA supports XML content-types by loading an XHTML document with the content-type
- 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
XMLHTTPRequestis 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-widthfeature is tested here.
- 9. Dynamic SVG
- SVG also supports animations, that can be used to create very appealing interfaces
- 10. The
contenteditableattribute 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