Test cases to improve interoperability
I will start with the IE Testing Center, where you can find over 7,200 test cases we contributed to the W3C; these tests cover the CSS 2.1 specification in depth, plus a few other specs from other W3C Working Groups. Because there are ambiguities, options, and misinterpretations in any specification, the IE Team created these tests to verify that a browser supports what you are trying to do before you depend on it.
To get a sense of how these tests work, let’s run some of them using the latest builds of the browsers as of this writing: Firefox 3.5.3, Safari 4.0.3, Chrome 22.214.171.124, Opera 10.00 (1750) and IE 8 RTM. It’s important to understand that there is no winner or loser here, just different browsers that are working with the same goal: better interoperability.
1. Border applied to element with 'display' set to inline-block
The test passes if there is a box below.
Run it here.
All browsers pass the test
2. Inline box containing block boxes
The test passes if there are blue borders around the top, left, and bottom, but not the right side of the text "First line," and borders around the top, right, and bottom, but not the left side of the text "Last line."
Run it here.
All browsers but Firefox pass the test
3. Margin collapsing - element with clearance
The test passes if there is no red visible on the page.
Run it here.
Only Opera and Internet Explorer pass the test
If you look at the source code of the pages (on IE8, right-click the page and select View Source), you will notice some recurring elements such as author, help, flags, and assert. These elements are standard components of all tests in the suite, which also include a simplified scenario to validate the assertion.
To make your life easier, the Expression Team also developed and released a new tool for Web developers: Expression Super Preview.
During the Auckland Web Meetup, I demonstrated how to use Expression Super Preview to perform cross-browser debugging, and to help sites migrate from earlier versions of IE to Web Standards in IE8. I was excited to hear the very positive responses from the user group audience, including Rob O’Callahan and his colleagues from the Firefox team--between a pizza and a beer (or maybe more?) I heard some very interesting feedback and got great ideas for future scenarios!
Expression Super Preview for IE is available for FREE here. Once installed, you can run this demo:
- Run it
- Select IE8 as reference browser on the left pane
- Select IE6 as comparison browsers on the right pane
- Set the location to this page, and hit the refresh icon
- Try the different visualizations (overlap, side by side, …)
- Do you notice any difference? J
In this demo, the site hit a well-known IE6 bug (double margin), that can be fixed by setting the display property to inline.
You can find other Training Kits, Tutorials, and Videos about Expression Super Preview here.
In my next posts, I’ll share other demos from my roadshow. Stay tuned!