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".
The diamond nose in the Acid2 test is created using concepts from CSS Border Slants. The nose is actually made from the borders of two elements placed next to each other. This may be easier to understand using some screenshots. The following image (based on this test) shows a 2em by 2em DIV with 1em borders, blue on top and bottom, orange on left and right:
If two such squares are put next to each other and the outer borders are changed to blue, the nose starts to form from the remaining orange borders (based on this test):
When the white squares are removed, the nose takes shape (based on this test):
Drop the blue borders and only a perfect diamond nose remains (based on this test):
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, like so (based on the first test above zoomed to 300%):
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. This is easily seen using the third test above zoomed to 300%. In 8.5, there's a row of blue pixels across the bottom of the test:
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, like so:
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.
Here's the updated rendering with this fix:
To see the difference between the above screenshot and the Acid2 reference rendering, just open these three images in separate pages and move back and forth between them (using 1 and 2): our previous rendering, our current rendering, and the reference rendering.
More information about CSS Borders Slants and shapes can be found at the following pages:
