Share via

IE8 and CSS 2.1 Testing

  • Article

Since I joined the IE team at the beginning of 2007, it has become clear to me how important it is for web developers to predict how a given browser will work.  I’ve certainly heard and read how very important it is to web developers to minimize the cost of supporting each additional browser version.  In apparent contradiction to this, everyone needs continued innovation in the browser to create new online business opportunities. 

One of the most important ways to ease development costs is to support a well-defined set of web standards in all the browsers.  This frees up developers’ time to spend on their site innovation rather than porting and testing work.  However, sometimes there are ambiguities or optional items in the specifications, such as the behavior of tables.  This naturally results in browsers that behave differently.

The Internet Explorer team is serious about enabling web developers to be the most effective and efficient as possible.  One very important way we can do this is to support and contribute to the web standards.  For the Internet Explorer team, we will do this in multiple ways including implementing support for standards and driving to cut the ambiguity in these industry standards’ specifications.

I believe the way to cut through the ambiguity is to have a set of tests that can help define how the implementation should actually work.  The W3C’s CSS Working Group has a set of 487 tests today in the CSS Working Group’s level 2 revision 1 test suite.  We just submitted over 700 tests to the W3C for possible inclusion into the official test suite.  We’re providing these using the BSD License.  We wrote these to test the CSS 2.1 behavior in IE8 beta 1.  The coverage they provide is for both basic property support and the scenarios called out in the CSS 2.1 spec.  We strongly believe in the W3C and how its test suites can ultimately help the web developers of the world spend more time creating new web experiences and less time dealing with browser differences.  The feedback regarding the first set of submitted CSS 2.1 tests will help us improve these tests and strongly guide our future test submissions to the CSS Working Group and others. 

The IE Test Team welcomes your feedback about our CSS 2.1 tests including our interpretation of how they test the CSS 2.1 support in IE8 Beta 1.  If you’re interested in commenting on the tests, I encourage you go to join the existing W3C’s 2.1 Test Suite Mailing List discussion on the topic.  I truly believe that starting with IE8 Beta 1 we’ve begun a journey toward making it easier for you to build the web in a standards-based, predictable way. 

Thanks a lot,

Jason Upton
Test Manager
Internet Explorer

Comments

  • Anonymous
    March 06, 2008
    Not sure about how this might relate to a given test but... If I have a block element with display:none; set as part of a CSS class, and I later via JS remove that class (thus showing the content), links that were added to content within that block will not work (in my case said links call JS via onclick) I'd provide a test case, and submit a bug to connect, but alas, we're locked out.

  • Anonymous
    March 06, 2008
    I should have noted... this is a regression bug.  Same content served up to IE6, IE7, IE8, Firefox, Safari, & Opera... all work except IE8 Beta 1.

  • Anonymous
    March 06, 2008
    Argh, why do you (MS, not the author) have to post everything in less than one working week? It's like a drought for 95% of the year and then suddenly there's a flood of content, which could have been released prior to IE8's launch. Internet Explorer isn't some state of the art, revolutionary, secret product. It's just another web browser. Don't starve us of information, and then try to force it down our throats.

  • Anonymous
    March 06, 2008
    How do you skip to a certain test in the suite, while keeping the navigation?

  • Anonymous
    March 06, 2008
    lol, it's true there is like an article flood all of a sudden... There is also a lot of repetition between articles (3rd time those 700 tests are mentioned), resulting in confusion and little actual information. Still, that easily beats silence, better too much than not enough. I'll check out those tests and see if I find any problem with Firefox 3... I haven't installed IE8 yet, I think I'll wait for a later beta, as the fact it's tied to the OS and overwrites the previous version is a bother. On a side note, I could never install IE7 on my computer for some reason, the installation keeps failing. I do have the needed OS (XP SP2) and have followed the FAQ about installation problems, to no avail.

  • Anonymous
    March 06, 2008
    when is object canvas support going to be improved

  • Anonymous
    March 06, 2008
    "We strongly believe in the W3C and how its test suites can ultimately help the web developers of the world spend more time creating new web experiences and less time dealing with browser differences." Does anybody else see the hypocrisy in this?

  • Anonymous
    March 06, 2008
    "Since I joined the IE team at the beginning of 2007, it has become clear to me how important it is for web developers to predict how a given browser will work.  I’ve certainly heard and read how very important it is to web developers to minimize the cost of supporting each additional browser version.  In apparent contradiction to this, everyone needs continued innovation in the browser to create new online business opportunities." No, you see this is what sets MS thinking apart from the other browser developers thinking. Developing web standards doesn't have to go against predictability. It only requires you to advance the standards in a way which the IE team seems very uncomfortable with. I.e. sitting down with the other browser makers and discussing thigs, thinking things out, setting a spec and then implementing. Hardly impossible.

  • Anonymous
    March 06, 2008
    The comment has been removed

  • Anonymous
    March 06, 2008
    The comment has been removed

  • Anonymous
    March 06, 2008
    Why are so many web pages broken (rendered wrong) in IE8 that worked perfectly in IE6, IE7 and other browsers? I am new to the whole beta experience but I was under the assumption that beta means the developer is pretty confident when their software.

  • Anonymous
    March 06, 2008
    The comment has been removed

  • Anonymous
    March 06, 2008
    David, We are sitting down with other browser makers. We're active in many of the W3C working groups (including chairing the HTML working group). And, we've worked together on non-stds things like EV certs. On top of that, we've worked with advocacy groups like the Web Standards Project to make sure we lots of points of view. This contribution of the test cases is just another example of how we're trying to work better with others. I think if you run the tests in the different browsers, you'll see why they're needed. While all browsers pass most of them, there are a bunch where only some of the browsers pass. There's already an interesting discussion going on about what the right interpretation of the stds is. That's what makes the tests useful; it's easy to say you support stds, but until there are tests, there's no way to prove it. None of the browsers currently has a full implementation of CSS 2.1, and as we're already seeing, there are differences between how we're interpreting the spec.

  • Anonymous
    March 06, 2008
    The comment has been removed

  • Anonymous
    March 06, 2008
    Anyway, it's great to see that you guys are rigorously testing the CSS support in IE8, and even better that you're contributing tests that all browser makers can use.  Despite what the various "morons" (as Seb above said) say, this indeed can only help encourage the full and correct implementation of web standards in all browsers.

  • Anonymous
    March 06, 2008
    The comment has been removed

  • Anonymous
    March 06, 2008
    Andrew Durdin is correct when talks about the :lang pseudo-class but I do have an observation.  Under both Firefox 2 and Opera 9.5 the same behavior occurs where the text in the second paragraph is also not in green.  But, when I add 'dir="ltr" lang="en" xml:lang="en"' to the HTML tag itself (which should have this sort of information in it to begin with BTW) the text then becomes green because the paragraph is properly inheriting the language.  Now the reason for this behavior could be because neither Firefox nor Opera are properly implementing the spec but the behavior of IE is consistent with others.  Surprisingly though Safari 3 implements it correctly.

  • Anonymous
    March 06, 2008
    The comment has been removed

  • Anonymous
    March 06, 2008
    The comment has been removed

  • Anonymous
    March 06, 2008
    Yep, I see exactly what you mean JurgenDoe. I clickd your name and it took me to your website and you are right, CSS is not displayed properly in IE7 or 8 (but in FF it looks fine)

  • Anonymous
    March 06, 2008
    The comment has been removed

  • Anonymous
    March 06, 2008
    @JurgenDoe Talking about standards: http://validator.w3.org/check?uri=http%3A%2F%2Fjurgendoe.deviantart.com%2Fjournal%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fs.deviantart.com%2Fstyles%2Fcss%2Fdeviant.css&warning=1&profile=css21&usermedium=all http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fst.deviantart.com%2Fcss%2Fnormal.css%2F4.css&warning=1&profile=css21&usermedium=all SCNR, Freudi

  • Anonymous
    March 06, 2008
    This page contains some testcases that IE8 is failing. dunno if the same tests are allready includedn in the 700+ testcases, but would be interesting, I think. P

  • Anonymous
    March 06, 2008
    And I should have added the url: http://resources.qooxdoo.org/download/advanced_boxtest/box_test_standard_overflow.html P

  • Anonymous
    March 06, 2008
    Well, according to Anne v Kesteren's post here http://annevankesteren.nl/2008/03/ie8-bad you for instance are not cooperating on the XDomainRequest. But then I don't know a thing about that stuff so I'm only taking his word for it.

  • Anonymous
    March 06, 2008
    Hey! I have simple login form on my site (with post-submit validation) and when I click on any link within the site (or entering address directly) each time a warning window appear with "Do you want to navigate away from this page blah blah blah. You made some changes to the form blah blah blah." - but problem is that I never touched any of form fields and there's nothing wrong with the code (in at least 5 browsers incl. IE 6/7). That's very annoying. Is there some new IE8 setting that cause this issue? (it's bad if it'll be set as default) What can I do? Thanks in advance.

  • Anonymous
    March 06, 2008
    Just out of curiosity: Do you test all these cases also with zoom and/or text size applied to different levels? I remember a few pages (including some of mine) where the layout breaks if you zoom the page (which shouldn't happen) or change the text size (which can happen with stupidly coded pages). Anyway, especially zooming is a problem sometimes.

  • Anonymous
    March 06, 2008
    Can the IE team document the "Integrated Windows Authentication" protocol so more browsers support it?

  • Anonymous
    March 07, 2008
    If we can't get weekly builds on IE, is it at least possible to get weekly updates on the Developer toolbar? This is a great idea, but from my testing in the last day seems monumentally buggy. It says that CSS attributes are being inherited from elements that it shouldn't be, and there is no way to add additional elements unless your element already has a style element to which you can modify the value of, and even then it doesn't always work 100%. Rarely does unchecking some of the buttons actually do anything. Should it? If not, why is it there. I've been trying my darndest to figure out why there appears to be additional top/bottom margins applied to windows created using the Prototype Window Class (see the second example on the samples page), and why the entire layout  VANISHES whenever you try to move said Window. It comes back when you release the mouse, but it was VERY scary the first time I did it. That and the unnecessary horizontal scrollbar are the only issues that I've seen. Shouldn't overflow-x: atuo; (or hidden) on the html element fix that?

  • Anonymous
    March 07, 2008
    The comment has been removed

  • Anonymous
    March 07, 2008
    Sounds to me like MS have decided themselves what the CSS standard is, then have written tests to back that up.  If W3C already have 480 tests, why do MS need to add 700 more?  If FireFox/Safari/Opera fail on those tests, does that mean those browsers aren't compliant?

  • Anonymous
    March 07, 2008
    The comment has been removed

  • Anonymous
    March 07, 2008
    @phil_r_5150: CSS 2.1 is a huge spec. The 1.5k tests that currently exist are no where near enough in my opinion, and yes, Firefox, Safari, and Opera do at times have bugs.

  • Anonymous
    March 07, 2008
    @Someone: Integrated Windows Authentication is the combination of Kerberos and NTLM. Kerberos is a standard, while NTLM is already supported by both Firefox and Opera.

  • Anonymous
    March 07, 2008
    Facilitating broad standards adoption in the industry is wonderful and long overdue, but please lead by example: I found 860 HTML errors on your blog's homepage.

  • Anonymous
    March 07, 2008
    Hello all, HTMLCollection of rows, HTMLCollection of cells are not supported anymore. Possibly this is because "there are ambiguities or optional items in the specifications, such as the behavior of tables." - Jason Upton , which, I suppose, would need to be clarified first before implementing them back. Example: Steps: 1- load http://www.gtalbot.org/BrowserBugsSection/Opera9Bugs/Opera7BugDOM2RowsSequentialOrder.html 2- in Developers Tools, Script tab, Immediate window: document.getElementById("idTable").tagName returns "TABLE" document.getElementById("idTable").rows returns "Unexpected call to method or property access." Also, filters collection is not supported... most likely (very reasonable assumption) that this is still a beta. In http://www.gtalbot.org/DHTMLSection/DynamicOpacity.html , document.getElementById("idImageToBeModified").filters returns {...} Best regards, Gérard

  • Anonymous
    March 07, 2008
    The comment has been removed

  • Anonymous
    March 07, 2008
    About table-rendering: unfortunately IE's current rendering algorithm makes it impossible to use text-overflow within non-fixed layout tables which is a real pain. There is effectively no way to restrict the width of a table while still allowing for dynamic column sizing which can easily break layouts that contain complex tables with lots of dynamic data.

  • Anonymous
    March 07, 2008
    "We strongly believe in the W3C and how its test suites can ultimately help the web developers of the world spend more time creating new web experiences and less time dealing with browser differences." Does anybody else see the hypocrisy in this?

  • Anonymous
    March 08, 2008
    The comment has been removed

  • Anonymous
    March 08, 2008
    Here are some images I made in a view with FF and IE..You can see on the arrows where IE doesn't show the CSS correct and even support hover at all

  1. FF - preview http://i264.photobucket.com/albums/ii168/JurgenDoe/FF-preview.png
  2. IE - preview http://i264.photobucket.com/albums/ii168/JurgenDoe/IE-preview.png

  • Anonymous
    March 08, 2008
    The comment has been removed

  • Anonymous
    March 08, 2008
    Have run across the following that has me somewhat concerned: The meta equivalent IE7 has been used on a content page. From my understanding this forces the IE7 engine within IE8 Beta. IE8 is used without using the "Emulate IE7" function. Conditional comments that support IE7 will only work with "if lte IE8". Will not function with "if lt IE8" or with any reference to IE7. Thanks.

  • Anonymous
    March 09, 2008
    @JuergenDoe Once again: Your site isn't is Valid XHTML 1.0 Transitional nor is your CSS. Before complaining about IE8b1 not rendering as it should (which for sure is true at least at this state of the beta cycle), it "may" be a good idea to rule out the errors present on your site('s code). Bye, Freudi

  • Anonymous
    March 09, 2008
    @all Thanks for the great comments so far.  They're great!  Please keep the constructive comments coming.   Tests are software too, so despite running these a lot and having multiple people review them, there could be minor bugs. Here are a couple general points:

  1.  I encourage you to run these on any browser that claims CSS 2.1 support, especially IE8 Beta 1.
  2.  When in doubt, read the CSS 2.1 spec and let us know if you think we read it wrong.
  3.  If you have testcase-specific comments, I strongly encourage you to post them to the W3C's 2.1 Mailing list at http://lists.w3.org/Archives/Public/public-css-testsuite/
  4.  We'll be primarily mining that list for possible changes to the tests based on the feedback. Thanks, Jason

  • Anonymous
    March 09, 2008
    @thacker That looks like a bug - thanks.  lte IE8 should work in both cases since the version vector is IE7 with the button down and IE8 with the button up. However, if a user is running "button up" they'll use the IE8 conditional comments regardless of the META tag on the page. Thanks!

  • Anonymous
    March 10, 2008
    JurgenDoe: You noticed that deviantART isn't parsed in IE 8 mode by default (check the developer tools). Thus complaining about CSS issues on that page is futile unless you switch the rendering mode. As a matter of fact, the hover you complained so loud about does work as intended by you or whoever else. The only thing I see that goes wrong there is that the Journal renders below the end of the left column. But that's not the issue you complained about. So please do us all a favor and do some research before jumping into everyone's face.

  • Anonymous
    March 10, 2008
    Upton-- Version vector should also target any version less than and not equal to IE8, [if lt IE8], with the use of meta tag specification to IE7. I view that ability important to exclude the IE8 beta engine for existing Web content. One important thing developers should be aware is that use of the meta tag does not change the user agent string.  The user agent string still remains IE8. This requires a change to any referenced conditional comments/vector versions used within the content when the meta tag is used to specify IE7. Whether or not internal changes can be made to IE8 that use of the meta tag will also modify the user agent string, should be considered. I don't know if that is even practical or can be done from your development standpoint. Thanks.

  • Anonymous
    March 14, 2008
    Min-height has problems again. Block treatment fail, like firefox.

  • Anonymous
    March 18, 2008
    @Tino Zijdel Hi Tino, Could you give us an example of the scenario you describe, where auto-sizing the columns of a fixed layout table does not achieve the results you are looking for? Thanks—we really appreciate your feedback. Erika