CSS3

One of the interesting things about Acid 3 is that it tests parts of the CSS3 Colour and CSS3 Selectors modules, that are a part of the 2007 CSS snapshot. Now that both Opera and WebKit pass the standards part of the Acid 3 test, the support for the snapshot has now also improved. The CSS 2007 snapshot is the state of play in CSS at the end of 2007.

WebKit used to lack support for many CSS3 selectors, but now passes the CSS3 Selectors test on this site, and supports all of these selectors. Opera already supported these, but didn’t support HSLA, RGBA and the CSS3 values for transparent. These were added to pass Acid 3 in a post Kestrel build (which may or may not be back ported). Due to these improvements, support in these two browsers for the CSS 2007 snapshot looks healthy.

Ignoring CSS2.1 for now (which Opera has very good support for), both browsers fully support the Selectors Level 3 spec and the CSS Namespaces spec. For CSS3 Colour, the support isn’t quite as clear cut. Everything is supported in Opera, except the flavor keyword and the various related colour profile properties. These properties are at risk of being dropped by the spec however. WebKit has the same support except it doesn’t support currentColor yet, and has some bugs with allowing mixed values in RGB and RGBA. Firefox has had similar CSS3 Colour support to Opera for a while now

Away from the 2007 snapshot, ACID3 also tests Media Queries. These were already supported in Opera and WebKit, but are not yet supported in Gecko or the IE engine. Web Fonts (@font-face) are in the test and were already supported by WebKit, while Opera was developing support, but speeded up development to pass the test. Finally cursor from CSS3 Basic User Interface was added by Opera to pass Acid 3. I’m unsure if this was already supported by WebKit or not.

Although CSS3 UI is not part of the CSS 2007 snapshot, the spec is close to being complete–apart from lacking an editor or a test suite–and support in one or more browsers exists for many of the properties. The features supported by one or more browsers now includes box-sizing (Opera, Safari, Firefox and IE8), resize (Safari), outline-offset (Opera, Safari and Firefox), nav-up, nav-down, nav-right and nav-left (Opera) and cursor (Opera, Safari and Firefox).

Update by David: Opera has now released a public WinGogi build of Opera passing the DOM test and with pixel perfect rendering. We don’t believe we have passed the test yet, as there are performance issues with a couple of tests. This puts Opera and Safari neck and neck. It is fantastic to see both the Apple and Opera teams taking this test seriously and pushing each other to improve our standards support. Who ever wins the race doesn’t really matter, the main point is that there are now two engines with the required standards support to pass Acid 3. This could be a shot in the arm for both CSS3 and SVG.

Update by David: Although the Acid 3 test was updated to allow WebKit to pass by the letter of the test, they still seem to fail by the spirit of the competition. One of the sections of the Acid 3 test checks SVG Animation. WebKit have added the interface to allow the test to pass, but not fully implemented the feature it was testing. See Jeff Schiller’s blog for more information.

Update by Joost: While Opera might have been the first to pass the test in laboratory conditions, for which I applaud them and I hope they release it ASAP, you can download a WebKit nightly right now and enjoy the full 100/100!

Update In the last few minutes (while I was eating lunch) the final 2% was reaching, making Opera the first browser to reach 100%. There are still some rendering issues, but things are well on track to passing the test. A preview build will be released on Opera Labs shortly. Thanks to our developers in Scandinavia that have been working into the evening to reach 100%.

Safari has been making great gains in its Acid3 score in recent weeks, currently residing on 96%. Opera however has come out of the chasing pack and moved from 77% in the latest weekly release of Kestrel, to 98%100% in the latest internal builds. As part of this it also includes the long requested CSS3 HSLA and RGBA support, and Web Fonts.

These improvements wont be included in a weekly Kestrel build any time soon. Opera, like Mozilla, are at a stage on our development process where we are closing in on a release, and thus regression testing and stability are critically important. This work will most likely (although not confirmed) go into a post Kestrel release, in case it causes regressions and the like. There will probably be an experimental alpha release showing this improved support in the not too distant future.

Ian Hickson, the Google employee tasked with creating the next generation of acid test, has completed his work, which is now available for public consumption at its new home, acidtests.org. Unlike the first acid test, which focused on the box model, and the second acid test, which covered a broad variety of basic HTML and CSS features, Acid3 covers 100 of the nooks and crannies of HTTP, HTML, CSS, ECMAScript, SVG and XML, all through the medium of DOM scripting, a critical requirement for any modern web application. Ian Hickson is also the primary author of the HTML5 specification, which started life as a spec. called ‘Web Apps 1.0’, and as such has lots of application‐related features such as client‐side storage and enhanced forms. Ian wrote 64 of the tests, with the remaining 36 being submitted by both browser vendors and interested web developers.

Work started on the new acid test almost as soon as the IE developer team posted notification that IE8 passes Acid2. As was widely criticised around the ’net recently, it was revealed Internet Explorer 8 would now only pass the test if the server was modified to output a special HTTP header. It is not known to css3.info at this time whether the header would be required for IE8 to achieve compliance in the new test.