Friday, April 8th 2005

Web Standards: The Acid2 Test

About a month back, Håkon Lie announced the planned creation of a browser technology test page named Acid2. The Web Standards Project agreed to sponsor and host the effort. Now the Acid2 test has been launched, although it hasn’t yet been officially announced.

It’s quite an ingenious work of art actually. It consists of a complex HTML page which makes use of a whole number of advanced CSS2 features. If rendered correctly, the various divs and spans and what-nots will make up a happy yellow face.

This test page makes me realize that even though Opera and Firefox are pretty good, they still have some way to go before they fully implement the available and useful standards. Here are screenshots showing how three common browsers cope with the test:

Here are screenshots of some old and some yet-to-be-released browsers: (Comparing Netscape 6.1 and a recent Firefox nightly build shows how far the Gecko layout engine has come since August 2001.)

Hopefully the Acid2 will inspire all the browser makers to further improve their standards compatibility. He who lives shall see.

Update: Reduced the size of the screenshots a bit.

Update 2005-11-02: Safari now passes the test! HamsterDeCombast posted a screenshot in the comments.

No Responses to this post:

  1. Anonymous says:

    Which browser(s) did make the cut?

  2. David Naylor says:

    None. 🙂

  3. Yuhui says:

    Could you test Safari please?

  4. David Naylor says:

    Well, I run a PC, so I can’t. But there is one here (made using a developer version of 1.3):http://www.paristemi.com/images/browsershots/safari.jpg

  5. Aaron says:

    yuhui-I have Safari, Knoqueror and Epiphany tested at my site, as well as FireFox, IE, Netscape and Opera.

  6. Kevin says:

    Hey, the big QUESTION is — HOW THE HECK DID HE DESIGN/DEVELOP THE PAGE W/O KNOWING WHAT THE FINAL RESULT WAS if all other browsers failed??Kinda like painting in the dark – how does he know that’s not what should be rendered??? haha

  7. Miles says:

    Because he has a brain and uses it? The standards (when well designed and written) are deterministic. Some of us can see this stuff clearly in our mind. But I suspect with something like this, he laid it out on paper or using a paint program, and had other people look it over, explaining what went where, and why. That’s how I’d do it.Feel free to download the code and do it, yourself!If you were just trying to be funny, my apologies; you need to work on delivery or timing or something. 8^/

  8. David Naylor says:

    Heh. Another point worth mentioning is that one of the co-authors of the test is the inventor of CSS.

  9. Anonymous says:

    Firefox 1.03 renders the smiley correctly.

  10. Anonymous says:

    i have 1.0.2 firefox and it renders a smiley face properly…would be nice to have an image that shows what it’s ‘supposed’ to look like though, at the moment, we have no idea what the test is supposed to render, so makes it a bit hard to test…

  11. David Naylor says:

    If you see the smiley face you are not looking at the test page, you are looking at the reference rendering.

  12. Anonymous says:

    firefox 1.0.3 / win2k pro. failed

  13. Anonymous says:

    safari now passeshttp://weblogs.mozillazine.org/hyatt/index.html

  14. omz says:

    >>At 5:32 PM, Miles said…>>… The standards (when well designed and written)>> are deterministic…don’t you think this standard ( CSS ) is complex and should not to be ?will be completeley supported by one browser some day ? i dont think so.W3C: describe thinks easier ( kind of unix KISS philosopy ) !! this is not about spaceships design !! its aboutrenderign visual objects. Call Mozilla, MS, Netscape, Opera and make a decent and realizable standard

  15. David Naylor says:

    “Call Mozilla, MS, Netscape, Opera and make a decent and realizable standard”Actually, the W3C is Mozilla, MS, Netscape and Opera.

  16. HamsterDeCombat says:

    Screenshot of Safari 2.0.2 :http://hamsterdecombat.free.fr/images/acid2_safari.pngThe nose becomes blue when you pass the mouse on it.

  17. David Naylor says:

    Cool – thanks!

  18. Anonymous says:

    Opera now reads the page correctly, and is free as well!

  19. David Naylor says:

    Does it really? Last thing I heard it only almost did…

  20. Anonymous says:

    don’t know about the pre-release of Opera version 9, but 8.51 doesn’t render correctly, though it does look better than the screenshot posted here of 8…