You may have seen this before but is the browser css acid test 2

basically; someone has created a set of complex, yet valid/correct CSS rules to draw a yellow smiley face with green eyes on a white background

Having tested in FF2; IE 6 and 7; and opera 9.21 I have found that none of these pass the test

http://www.webstandards.org/files/acid2/test.html

Amazingly, it is rumoured that an internal MS build of IE8 does pass this test

According to that web developer tools thingy majiggy, it says that the page doesn't validate.

So who's right?

MrStitch wrote:

According to that web developer tools thingy majiggy, it says that the page doesn't validate.

So who's right?

I'd guess the validation tool thingy is wrong; I wouldn't be surprised if the acid test uses CSS 1, 2 and 3 - given that all 3 are current official standards

looks like part of what the test is doing is testing for the browser specific work-arounds (many of which are not valid css).  But the thing is I don't see that a browser allowing some of these as invalid as long as it doesn't require them (cough! ie cough!) to make a valid design work.  If you're making proper valid code, these things should never come up.

Well, I ran the page past W3C css validator and it came up with the same errors.

Someone should e'mail 'em. hahahhhaa

MrStitch wrote:

Well, I ran the page past W3C css validator and it came up with the same errors.

Someone should e'mail 'em. hahahhhaa

They already know it has errors.  Thats the point of the Acid test. 

The Acid test does not test that a browser displays CSS correctly.  Its a test of how gracefully it fails on incorrect or invalid CSS.

Not sure I understand. Couldn't you come up with the same problems by looking at ANY site with errors in the css?

Also, if the CSS has errors, isn't it logical to think that the browser is going to display some funky stuff?

MrStitch wrote:

Not sure I understand. Couldn't you come up with the same problems by looking at ANY site with errors in the css?

Also, if the CSS has errors, isn't it logical to think that the browser is going to display some funky stuff?

yes, but then you are talking about testing a website or testing a CSS - not testing a browser

Still lost.... what are we testing again?

Concerning the errors in the CSS, I refer you to the following:

http://www.webstandards.org/action/acid2/

Note: Some 827 people (rough estimate, contents may have settled during shipping) have written to point out that the CSS used in the test is invalid. This is deliberate, as a means of exposing the ability of user agents to handle invalid CSS properly.

Here's my dumbed down version:  Its a browser test.  Like all good software tests, you should always test 2 things.  First you test the positive test meaning you test that what is supposed to happen happens given a valid and expected input.  Then you test the negative test, meaning you test that when you give a program some invalid input that the program fails gracefully and nothing bad or unexpected happens.  Programmers should always test both the positive and negative case, but they often test only the positive case if they test anything at all.

The Acid 2 tests tests the positive cases of several rare or obscure CSS features, it also tests the negative case by including many invalid CSS features that a compliant browser should properly ignore.

If a browser passes both the positive and negative cases, then you should see a nice smiley face on the Acid 2 test.

But the "errors" in the CSS file that are used are there on purpose, because its a software test and it should properly test the positive and the negative test cases.

Ok.... Let me get this straight....

The code is purposely written incorrectly to test the persons browser.

If you see the whole smiley like it's meant to be, then your browser passed the test?

If so, then how the heck does that work?!?!? I mean, if the code is incorrect, then how is the browser suppose to generate the smiley? After all... the browser is just doing what the code is telling it to do.

So... what... is the browser suppose to guess what the code is suppose to be?!?!?

And if IE8 passes this test, then wouldn't that mean that IE8 is already broken, since it's apparently making guestimates as to what the rendered page should look like.

More when I get home.....

What he's saying is that this tests:
1. if the browser properly displays valid css, and
2. if the parser properly ignores ALL invalid css

So they have valid code in there that should affect the display, and afterwards have invalid code which because of the cascading part of CSS would override the values of the "good" code if it isn't ignored.

For example one of the invalid code portions is based on the "* html" hack.  So if you had two lines like:

.parser { background-color:yellow; }
* html .parser { background-color:grey; }

a correct browser would show yellow, a browser that didn't accept .parser as proper css would show as the default background color, and a browser that incorrectly accepts * html as valid css (IE6) would show as grey even if the first line was accepted.  Of course this is an oversimplification of what the test is doing, but I hope this helps.

I think I see... in sort of a general idea, but it's still very foggy.

My gut tells me that the acid test is only good for.... well... nothing.

Er wait...... uhm.... nope.... sorry, still got nothin'.

Hmmmm, according to your last statement, if a browser DID accept the incorrect code, then the browser would be 'broken' (for lack of a better term). In this case, we KNOW that the code is incorrect, yet rumor has it that IE8 passes the test. Maybe a better example is called for?

I don't know guys. Every once in a while my brain reaches for some vague understanding, but the logical part of me head kicks the whole thing down.

Maybe because what we have here is a completely broken apart image on my browser, due to 'bad code'. Yet, for some reason I'm suppose to believe that it's NOT the code, but the browser. WTF?!?!

The more I think about this, the more I wanna start shooting people.

The way I see it, the incorrect code is primarily based on various hacks that are meant to affect only certain browsers like the * html hack for IE5.5 and 6.

If a browser works properly on all properly coded CSS, there really isn't a need to use any hacks to just affect that browser.  Just write the baseline CSS properly, and use the hacks for the browsers that aren't compliant.

The hacks that affect specific browsers wouldn't be as effective if they didn't isolate the code from browsers that didn't need them, so I guess the purpose of those negative tests would just be to make sure those hacks don't affect the fully compliant browser.

Uhg..... lets simplify this to something more reasonable -

Geeks with too much time on their hands.

MrStitch wrote:

Uhg..... lets simplify this to something more reasonable -

Geeks with too much time on their hands.

ROFLMAO

How about this.

Insures compliant browsers ignore hacks needed for non-compliant browsers

MrStitch wrote:

If so, then how the heck does that work?!?!? I mean, if the code is incorrect, then how is the browser suppose to generate the smiley? After all... the browser is just doing what the code is telling it to do.

because the stuff thats invalid shouldn't do anything - if it does do something, then the smiley is distorted