Acid 2 progress

Opera's developers have been working hard on getting the Acid2 test right. Most of the work is being done on a new branch of the core Opera code. This code branch is not ready for public consumption yet. So rejoice to see the progress, but don't expect to see this coming to a computer near you in the near future.

I will explain some of the fixes done so far over the next couple of weeks. Note that regression testing is still being done, and some fixes might have to be reverted if it turns out important sites rely on the old behavior.

acid2-face.png

So, now to start telling you how we got to where we are in the current internal builds. The first screenshot from the new version of Presto comes from a build including two Acid2 fixes. First, the gap between rows 9 and 10 was fixed by a rewrite of our margin collapsing code. The problem the Acid2 test showed was related to floats followed by elements with the clear property set. Check this test case to see how your browser handles it.

Opera didn't recognize the :hover pseudo-class if it wasn't used in combination with other selectors. Our second fix in this build was to change this behavior so Opera is now spec. compliant when using a Standards mode DOCTYPE. The behavior when Quirks mode is triggered is unchanged. Check this test case to see if your browser styles the :hover pseudo-class. Though it's not visible in the attached screenshot, the nose now turns blue when hovered instead of turning red.

Attached is the updated rendering with the two (one visible) fixes.

acid2-7801.png

Our next update comes from Merlin build 7830, which includes three fixes for problems seen in the Acid2 test. First, we fixed a problem with anonymous table creation. More specifically, if a table existed within an anonymous table row, then the table row was terminated after that table. This partially fixed the problems in row 14 and beyond. Check this test case to see how your browser handles it.

Second, we fixed a problem drawing backgrounds on tables without rows, but with both width and height specified. This change fixed the rest of the problems seen in row 14 and beyond. Check this test case to see how your browser handles it.

Third, we now correctly parse SGML comments in Standards mode. I posted about this previously because at the time we weren't sure we would fix this issue. We decided to give it a go, but we're already seeing problems on several pages. We'll gather additional feedback during alpha and beta releases of Merlin and make a decision whether or not to keep this change before the final release.

Here's the updated rendering with these three fixes:

acid2-7830.png

One more Acid2 fix came in build 7841: if a :before or :after pseudo-element existed in a page's stylesheet that didn't match anything in the document, it would cause odd things to happen. I sincerely doubt any other browser has this problem, but if you really want to check, use this test case. The eyes now render, though there are still other problems in rows 4 and 5.

We're now finally up-to-date with the internal build screenshot posted at the beginning of August. Here on out is uncharted territory.

acid2-7841.png

Another Acid2 fix came in build 7966. This issue wasn't even a bug, per se, as no specification defines how to handle it. The fix was made more to be compatible with Acid2 and other browsers than because it caused problems on actual sites. It's also the most trivial issue in Opera's rendering of the Acid2 test. Despite all that, it's my pet Acid2 issue. Without further ado, I give you, the Four Corners "bug".

Without anti-aliasing, only one color can be used for each screen pixel. Thus, the rendering engine has to choose which side of a border to give priority to for each border intersection. In 8.5, Opera draws single borders around an element in the following order: top, left, right, and bottom. This means that the bottom border will extend all the way across a figure, the left and right borders will extend all the way to the top, and the top border won't touch either corner at the top of the figure. Other browsers appear to draw the top border last, extending it to both corners at the top of the figure.

What does this mean for the Acid2 test? It means the nose is one pixel higher in Opera than in other browsers. The only reason I noticed this discrepancy is because I opened the Acid2 test in one page and the reference rendering in another page and went back and forth between them. Lo and behold, the nose looked like it was bouncing up and down. And we can't have that. So, we changed the drawing order for borders. Now, Opera draws single borders in the following order: bottom, left, right, and top. This change made the rendering of the rows 7 and 8 compatible with the Acid2 reference rendering. Check these test cases to see how your browser handles border intersection: one, two, three, four, and five.

acid2-7966.png

See my blog for some more details and illustrations.

Update: This post was originally made on February 10, 2006. However, we found that we needed to do some additional information verification the next day and took the post down. Verification now complete, the original post is back:

Two more Acid2 fixes came in build 7981. These changes make no visible difference in the rendering of the test. Instead, they remove the scrollbar on the page in which the test is displayed. As with several other items, this part of the test is not mentioned in the Acid2 guide. Personally, I didn't even notice the problem until a colleague pointed it out. Now, on to the bugs.

In the Acid2 test, the HTML element is set to overflow: hidden, which should hide the scrollbar on the page, regardless of the page's length. However, in Opera, if the CSS overflow property was set on the root element of a document, the property would not be propagated to the viewport. For HTML documents, that meant setting overflow on the HTML element would not change the overflow property on the BODY element. This bug is now fixed and the scrollbar no longer appears on the Acid2 test page. Check this test to see how your browser handles it.

Unfortunately, Opera had another bug which would break Acid2 after the above fix. In particular, if a link went to an anchor in an element set to overflow: hidden, Opera wouldn't scroll to that anchor. Check this test to see how your browser handles it. Though the URL for the Acid2 test is http://webstandards.org/act/acid2/test.html, the visual portion of the test is at http://webstandards.org/act/acid2/test.html#top. Thus, without fixing this bug, there would be no way to scroll to the visual portion of the test. Thankfully, these two bugs were fixed simultaneously.

There is no updated rendering screenshot, as the rendering itself didn't change, just the existence of the scrollbar for the page. Load the Acid2 test in Opera 8.51 and Opera 9.0 Preview 2 to see the difference.

Smile, Opera passes the Acid2 test! The final fix came in build 8249, where we fixed a problem with the stacking order of floated and inline elements. According to the Elaborate description of Stacking Contexts in the CSS2.1 spec., floated elements are supposed to be under inline elements, though Opera painted them on top. This caused two problems in rows 4 and 5: the eyes were dimmed and there was a red bar to the right of the eyes. Check this test case to see how your browser handles it.

This last change had caused some regressions in the rendering engine, but they should all be cleared up by now. Also, since Opera 9 is still under development, there's a possibility that there could be further regressions in the rendering engine that could cause a weekly build not to pass the test. We don't expect this to be the case, though.

1acid2-8249.png