The Acid 3 Test - The Latest Browser Results
Whilst browsing the Internet today I came across this great letter, which contained a link to a blog written by Internet Explorer and how IE9 is going to eventually almost comply to the acid 3 test (although the time that happens the acid 4 test will have been released and IE9 won't have a chance!).
This led me to wonder how the current array of popular and up-to-date browser versions are complying with the acid 3 test as it stands today. The results were interesting in some cases, bhut as you would expect them to b in others. Continue reading to find out how they all did!
Our Base Reference
Here is a picture of the acid 3 test completed and how it should look in a browser that adheres to it's strict ruleset.

The main criteria are that it has to pass 100/100 on the javascript test (noted by the numbers 100/100) and each of the squares should render smoothly and be the correct colour once they have loaded.
Firefox 3
Might as well start with a browser that we would all expect to do pretty well on this test, if not pass (and for this test a pass is getting 100% in each criteria, which is no easy feat!). Below is the image for Firefox 3.6.3 (which I believe is the latest build of Firefox 3).

As you can see, there are a couple of issues! Firstly the javascript rendering only hit 90% out of 100, which is actually quite poor for such a popular and widely-used browser, especially when you consider this test can only be passed by hitting that 100%.
The other thing to note here is that the colour matching wasn't perfect either. There were two instances where the colours transition didn't hit the mark, which again is quite poor. On a side note here I will also add that the animation wasn't at all smooth, but that may have something to do with the computer issues I'm currently having.
All in all, not a very good result for the popular browser... you might even call it an epic fail! I was expecting a flawless victory personally!
Google Chrome
For the Chrome test I used the most recent version I have on my PC, which is 4.1.249.1064 (build 45376). The results of this browser/version were:

The result were a lot more promising. The first thing to note was that the animations were incredibly smooth, which is certainly one thing I love about Chrome in general (especially when it comes to CSS3 transitions!). The rest of the test was also as successful as the javascript score was an easy 100/100 and each of the coloured boxes rendered in the right place to the right colour.
One thing I would like to note here (and this is what led me to conduct this test in the first place) is that on a different Chrome browser (my work one) when I ran the test I got something that more resembled the IE8 test (which you will see below). I was ultimately shocked, and try it many times always with the same result. I will find out what version of Chrome it was and hopefully capture a screenshot as proof later on!
Safari 4
The result for Safari 4 (particular version 4.0.5 build(531.22.7)) can been seen below:

As you can see (expectedly) the results were exactly those of Chrome 4 (seeing as they are based on the same rendering engine). The animations were very smooth, although not quite so as Chrome, and all the colours appeared in the right places. A little dull that test!
Opera 10
For this test I was using version 10.53 (build 3374). This was my biggest surprise in a good way. I had expected Opera 10 to do well but having never really used except for the odd bit of browser testing I didn't know what to expect. I've had a few issues with javascript and Opera in the past and one or two CSS differences so it was going to be interesting.

Absolutely nothing went wrong! The animations were very smooth, and as you can see, everything appeared in the correct place, at the correct colour with the javascript check getting 100/100.
Not bad! Might have to have a play with Opera 10 to see how far it has come since I last tried it!
Internet Explorer 8
So that leaves our favourite browser vendor, Internet Explorer 8.0.7600.16385! Surprisingly, I didn't have aprticularly high hopes that IE would get anywhere near the target, although I was hoping and praying that it would do better than I expected. And did it? See for yourself...

Did you really expect anything else? What was worse is that in order for it to actually complete the test properly I had to install a plug-in for MSXML, which then produced that lovely popup as a 'feature' of the test.
Suffice to say, nothing worked as expected and the big 'FAIL' in the top-right kind of says it all. I have been reading that Internet Explorer 9 is going to be passing this test, and they are getting close. All I can say to that is, don't hold your hopes high!
So there you have it. The latest browsers, the results, the surprises and the expectations! If you would like me to add any other browsers to this just let me know and I'll see what I can do. I decided to just go for the latest because of the developments that they are said to offer.
Comments welcome, as always!
Article Info
- Posted By: Alex Hall
- On: 18th May 2010 @ 22:28:02
- Comments: 6
- Rating: 5 / 5
- Hits: 1045
- Listed In: html, optimisation, css, javascript
- Short URL: http://bit.ly/aXVsAM

Author: Matthew Kellett
#1 | 25th Jun 10 @ 18:44
Hahaha Opera for the win, if memory serves me correctly that was the first browser to pass that test with 100 / 100.
Good to see Firefox is catching up though and IE is in it's usual position ... propping up the rear :-D
reply
Author: Alex Hall
#2 | 25th Jun 10 @ 19:33
I think you're right in saying that Opera was the first to pass. I've just seen the latest test from IE9 and it gets 88/100 and actually looks almost the way it should!
I think their aim at Microsoft is to have it pass by the time the browser is released!
reply
Author: Matthew Kellett
#3 | 26th Jun 10 @ 20:30
That won't be too bad then if they do, I suppose they have about another 5 years to perfect it then :D
reply
Author: estecb
#4 | 14th Aug 10 @ 09:17
Hi, Opera rulz. n_n
off-topic: About your twitter login form article (didnt found a blog article about it), I think it would be nice if you drop the ":target" thing and use ":hover" instead (it works in most browsers), so you should add ul and li, like in a regular css menu. Besides, this way the log-in will keep active, i believe.
Regards. Esteban.
reply
Author: Alex Hall
#5 | 14th Aug 10 @ 20:28
Hi Estecb,
Thanks for your comment about the Twitter Login form. I should probably create an article about that!
The reason I used :target as opposed to hover is to show what the pseudo selector is capable, but also so that you didn't need to keep the mouse hovered over the menu to actually use it. Having it appear when set as the target means it will remain their while it needs to be interacted with, which it wouldn't if hover was used because you don't use the mouse to interact with an input form.
reply
Author: estecb
#6 | 14th Aug 10 @ 22:37
Hi alex, thanks for replying me.
You are right, ":target" works better on forms, the only reason i mentioned the use of ":hover" was because it has been supported in major browsers. In the other hand, i think people leave the mouse just where it is, after clicking an input field. So, the form would keep visible. that's what i do anyway.
reply