Acid2 facts for kids

Quick facts for kids
Acid2

This is the reference image for Acid2. In the real test, the nose becomes blue while the cursor is hovering over the yellow part of the face.
Type of site	Web standards test
Available in	English
Owner	The Web Standards Project
Created by	Ian Hickson
Website	https://webstandards.org/files/acid2/test.html
Commercial	No
Registration	No
Launched	13 April 2005
Current status	Online

Acid2 is a special webpage designed to test how well web browsers work. It checks if browsers can correctly show different parts of a webpage. This includes HTML code, CSS (which makes pages look good), PNG images, and data URIs.

The Web Standards Project released the Acid2 test on April 13, 2005. A browser passes the test if it displays the page exactly as it should. This means it follows the rules set by groups like the World Wide Web Consortium. These rules are called web standards. They make sure websites look the same on different browsers.

Acid2 was created to find problems in how browsers display webpages. It's named after an "acid test" for gold, which checks if gold is real. Before Acid2, there was Acid1, which mainly tested Cascading Style Sheets 1.0. If a browser showed the Acid2 page perfectly, it meant it was following the web standards correctly.

The Acid2 test was especially made with Microsoft Internet Explorer in mind. At the time, Internet Explorer often showed webpages differently from other browsers. This made it hard for web developers. Acid2 challenged Microsoft to make Internet Explorer follow web standards better.

Safari 2.0.2 was the first browser to pass Acid2 on October 31, 2005. Other browsers like Opera, Konqueror, and Firefox soon followed. By March 19, 2009, when Internet Explorer 8 was released, all major desktop browsers could pass the test. Acid2 was later followed by Acid3, another important test.

History of the Acid2 Test

The original Acid2 smiley face. An early version had a small error, making the nose too close to the mouth.

The idea for Acid2 first came from Håkon Wium Lie. He was a top manager at Opera Software and helped create Cascading Style Sheets (CSS). In 2005, Lie was worried that Microsoft Internet Explorer wasn't following web standards. This meant it didn't work well with other browsers.

Lie announced that Acid2 would challenge Microsoft. He hoped it would push them to make Internet Explorer 7 follow standards more closely. The first Acid1 test had already made browser makers fix their programs. Lie hoped Acid2 would do the same.

Lie and his colleague, Ian Hickson, made the first draft of the test in February 2005. Ian Hickson then worked with the Web Standards Project to create the final test. It was officially released on April 13, 2005. At that time, every single web browser failed the test badly.

The Acid2 test was updated a few times. On April 23, 2005, a bug was fixed that made the smiley face's mouth too close to its nose. In January 2006, another update removed a test for old-style comments. These comments were not widely used, and the original test showed "ERROR" if a browser didn't support them.

In March 2008, Ian Hickson released Acid3. This new test was a follow-up to Acid2. While Acid2 mainly checked CSS, Acid3 focused more on JavaScript and newer web technologies.

What Standards Does Acid2 Test?

Acid2 checks many web standards created by the World Wide Web Consortium and the Internet Engineering Task Force. Most of these standards were made before the year 2000. CSS 2.1 was still being developed when Acid2 came out.

Here are some of the things Acid2 tests:

• Alpha transparency in PNG images: The smiley face's eyes use something called alpha transparency. This is a feature of PNG images from 1996. It makes the eyebrows blend smoothly into the face. This was a big deal because Internet Explorer 6, a very popular browser then, didn't support it. Internet Explorer 7 later fixed this.
• The object element: The eyes also test how well browsers support the HTML object element. This part of HTML has been around since 1998. But by 2005, not all browsers fully supported it. The creators of Acid2 thought it was important because it allows for "fallback content." This means if an image or video doesn't load, the browser can show something else instead.
• Data URIs: The images for the eyes are stored using data URIs. This lets images and other media be put directly into a webpage. They don't need to be separate files. Acid2 tests a common way of doing this, where an image is turned into text. Even though the IETF published the data URI rules in 1998, they didn't officially make it a standard. Still, most browsers now support data URIs.
• CSS positioning (absolute, relative, fixed): This checks how elements are placed on a page.
  • Absolute positioning means you set an exact spot for an item.
  • Relative positioning means you move an item a certain amount from its normal spot.
  • Fixed positioning means an item stays in the same place on the screen, even if you scroll the page.
• The CSS box model: This feature lets web designers control the size, padding, borders, and space around elements. It was a main focus of the original Acid1 test. Acid2 also tests minimum and maximum heights and widths, which were new in CSS 2.0.
• CSS table formatting: This part of CSS lets designers make tables look good without using old-fashioned HTML table code.
• CSS generated content: With this, web developers can add extra designs or notes to elements. They don't have to add the content to each one separately.
• CSS parsing: Acid2 includes some incorrect CSS code. This tests how browsers handle errors. Browsers that follow standards should deal with these errors correctly. This helps make sure websites work the same in all browsers.
• Paint order: Acid2 checks that browsers draw overlapping items in the correct order. If one item is supposed to be on top of another, the browser must "paint" it that way.
• Hovering effects: When you move your mouse over the smiley face's nose, it turns blue. This is called a "hovering effect." It's often used for links, but it should work on many different parts of a webpage.

Acid2 doesn't test everything. So, passing it doesn't mean a browser follows every single standard perfectly. There's also a version of Acid2 that doesn't test data URI support.

How to Test Your Browser

This image shows Acid2 on Firefox 92.0.1. The image was zoomed in by 300% in the browser, which caused errors.

For the test to be fair, you must use your browser's default settings. If you change things like font sizes, zoom level, or custom styles, the test might not display correctly. This is normal and doesn't mean your browser isn't following standards.

The test is not valid if you do any of these:

• Scrolling the page.
• Changing the size of the browser window.
• Zooming in or out.
• Turning off images.
• Using Opera's "Fit to width" or "Small Screen Rendering" modes.
• Applying your own fonts, colors, or styles.
• Using User JavaScript or Greasemonkey scripts.
• Turning on Internet Explorer's "compatibility view."

Browsers That Pass and Fail

If Acid2 is shown correctly, you will see a smiley face with the words "Hello World!" above it. When you move your mouse over the nose, it should turn blue. By early 2009, all major web browsers could pass the test. But when the test first came out, every browser failed it.

The images below show how popular browsers looked when Acid2 was released on April 13, 2005. You can see the different errors they had.

• 

  Reference rendering

• 

  Internet Explorer 6

• 

  Firefox 1.0

• 

  Safari 1.2

• 

  Opera 8.0

When Browsers Started Passing Acid2

Here is a list of important dates when different browsers officially passed the Acid2 test.

See Also

In Spanish: Acid2 para niños

• Comparison of layout engines