Acid2 is a test page published and promoted by the Web Standards Project to identify web pagerendering flaws in web browsers and other applications that render HTML. It was developed in the spirit of Acid1, a relatively narrow test of compliance with the Cascading Style Sheets (CSS) standard, and was released on April 13, 2005. Like Acid1, the way a web browser renders the test is compared to a reference rendering. If the two match, the browser is considered to pass the test.
Acid2 tests aspects of HTML markup, CSS styling, PNG images, and data URIs. It should render correctly on any application that follows the World Wide Web Consortium and Internet Engineering Task Force specifications for these technologies. The idea is that if both web sites and web browsers follow agreed-upon industry standards, then any web site will work the same in any web browser.
On October 31, 2005, Safari 2.0.2 became the first browser to pass the test. Opera, Konqueror, Firefox, and others followed. The only major browser that does not yet pass the test is Internet Explorer, although a version that passes Acid2 is in development.
Ian Hickson coded the actual test in collaboration with the Web Standards Project and the larger web community.[3][4][5][6] It was officially released on April 13, 2005[7] and at that time, every web browser failed it spectacularly.[8]
In July 2005, Chris Wilson, Internet Explorer's Platform Architect, responded by calling Acid2 a "wish list" of features and said that while the test was important to Microsoft, Acid2 compliance was not a priority for Internet Explorer 7.[9] Microsoft later joined other browser makers and Internet Explorer 8 is expected to pass the test.[10]
The smiley face of the first version of Acid2. Note that due to problems in this version of the test, the mouth is too close to the nose and the text "ERROR" appears.
On April 23, 2005, Acid2 was updated to fix a bug that made the mouth appear too close to the nose.[11][12] After several complaints, the test was again updated in January 2006 to remove a test for unpopular SGML-style comments that were never widely implemented.[2]
In March 2008, Ian Hickon released Acid3 as a follow-up to Acid2. While Acid2 primarily tests CSS, Acid3 focuses more on JavaScript and other "Web 2.0" technologies.[13]
Alpha transparency in PNG-format images: The eyes of the smiley face use alpha transparency which is part of the 1996 Portable Network Graphics specification. The alpha transparency provides an elegant way to have the eyebrows smoothly blend into the face. This was a significant issue because Internet Explorer 6, the most widely used web browser at the time Acid2 was released,[19] did not support alpha transparency. This deficiency was rectified in Internet Explorer 7, bringing Internet Explorer in line with other web browsers in this regard.[20]
The object element: The eyes also test support of the HTML object element. The object element has been a part of HTML since HTML 4 was released in 1998,[21] yet by 2005 it still was not completely supported in all web browsers. The creators of Acid2 considered object element support important because it allows for content fallback; in other words, if the specified object fails to load then alternative (generally simpler, more reliable) content can be presented instead.
data URIs: The actual images that form the eyes are encoded as data URIs. Data URIs allow embedding multimedia directly into web pages rather than being stored as a separate file. Acid2 tests the most common case, where a binary image is base64-encoded into text and then that encoded text is included in a data URI in the web page. Interestingly, although the specification for data URIs was published in 1998,[16] it was never formally adopted as a web standard. Nonetheless, the data URI scheme has become a de facto web standard implemented by most browsers.
Absolute, relative, and fixed CSS positioning: Absolute positioning means that the web developer specifies the exact X and Y coordinates where an element is to be placed into the page. Relative positioning means that the web developer specifies an X and Y offset from the usual position of the element. Fixed positioning means that the element is placed relative to the browser window, and scrolls with the window rather than with the rest of the page.[22]
The CSS box model: This feature allows specifying dimensions, padding, borders, and margins,[23] and was the focus of the original Acid1 test.[18] Acid2 not only retests margin support but also tests minimum and maximum heights and widths, features new to CSS 2.0.
CSS table formatting: This part of CSS allows applying table formatting without traditional HTML table markup.
CSS generated content: Using CSS generated content, web developers can add decorations and annotations to specified elements without having to add the content to each one individually.
CSS parsing: A number of illegal CSS statements are present in Acid2 to test error handling. Standards-compliant browsers are expected to handle these errors as the CSS specification directs. This helps ensure cross-browser compatibility by making all browsers treat CSS with the same level of strictness, so that what works in one browser should not cause errors in another.
Paint order: Acid2 requires that the browser have standard paint order, that is, overlapping elements should be placed or painted on top of each other in the correct order.
Hovering effects: When the user moves their mouse over the smiley face's nose, it turns blue. This is called a hovering effect, and while it has traditionally been used for hyperlinks, it should work on a wide variety of HTML elements.[24]
Because Acid2 is not a comprehensive test, it does not guarantee total conformance with any particular standard. A variant of the Acid2 test that does not test for data URI support is also available from the Web Standards Project.[18]
Passing conditions
A passing score is only considered valid if the browser's default settings were used. Actions such as changing font sizes, zoom level, and applying user stylesheets can break the display of the test. This is expected and is not relevant to a browser's compliance.[25]
The following browser settings and user actions invalidate the test:[25][26]
Scrolling
Resizing the browser window
Zooming in or out
Disabling images
Using Opera's Fit to width or Small Screen Rendering modes
If rendered correctly, Acid2 will appear as a smiley face below the text "Hello World!" in the user's browser, with the nose turning blue when the mouse cursor hovers over it. At the time of the test's release every browser failed it,[8] but now a number of applications pass the test:
Mozilla Sunbird 1.0, a calendar application for Windows, Mac OS X and Linux
SeaMonkey 2, an internet suite for Windows, Mac OS X and Linux
Spicebird 0.7, a personal information manager for Windows, Mac OS X and Linux
Non-compliant applications
In July 2005, Chris Wilson, the Internet Explorer Platform Architect, stated that passing Acid2 was not a priority for Internet Explorer 7, describing the test as a "wish list" of features rather than a true test of standards compliance.[27] In December 2007, Microsoft announced that all the changes required to pass Acid2 would be made available in Internet Explorer 8, but that the changes would not be turned on by default, meaning that IE8 would not actually pass the test.[28][29] Then in March 2008 Microsoft released IE8 beta 1 and turned on the changes by default after all,[30] but another unresolved standards compliance issue prevented it from passing in some cases.[31][32][33] In August 2008 Microsoft released IE8 beta 2, which resolved the issue,[34] however in IE8 beta 2 standards mode is not turned on by default for pages loaded in the "Intranet Zone". This zone is active for pages loaded via UNC Paths, named addresses without dots (eg. http://mysite/) and sites that bypass the proxy settings.[35] As such, IE8 will not pass the Acid2 test if loaded in these cases.[36]
Even though Opera Mini is based on the same rendering engine as Opera for personal computers, it does not pass the Acid2 test.[37][38] This is because Opera Mini intentionally reformats web pages to try and make them more suitable for devices with small screens.[25][39][40]
As of November 2008, approximately 75% of visitors to web sites use applications that do not pass the Acid2 test.[41]
<gallery widths="150px" style="margin-left:auto; margin-right:auto; text-align:center">
Image:Ieacid2.png|Internet Explorer 6
Image:Ie7acid2.png|Internet Explorer 7
Image:Acid2 NS72.png|Mozilla Firefox 1.0, Mozilla 1.7.13, and Netscape 7.2
Image:Firefoxacid2.png|Mozilla Firefox 1.5 and 2.0
Image:Opera 8.0 Acid2.png|Opera 8.0
Image:Opera 8.54 Acid2.png|Opera 8.54
Image:Konqueror 3.4.1 Acid2.png|Konqueror 3.4
Image:Acid2 in Opera Mini 4.png|Opera Mini 4
Image:Acid2iPod.png|iPod touch 2.0
Image:Netsurf-1.2-acid2.png|NetSurf 1.2
</gallery>
Timeline of passing applications
The following is a list of releases noting significant releases of applications that passed the test. New applications that have passed Acid2 since their first official release are not included in the timeline.
This version of iCab displays a scrollbar on the viewport. Although some state that a correctly rendered test should not have a scrollbar,[45] that feature is not part of the test, and merely a way to prevent the user from scrolling.[46]
WebKit, the underpinnings of Safari, was made open source on June 7, 2005. When Safari was run with this latest version of WebKit, it passed the Acid2 test.
First Microsoft Windows-compatible browser to pass the test and also the first Linux-compatible browser to fully pass the test. A public beta was released on April 20, also successful.[54][55]
The "reflow branch" nightly builds, whose code was branched from the Gecko 1.9/Firefox 3.0 trunk and was merged back into the trunk on December 8, 2006.[58]