<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d13405220\x26blogName\x3dPavan+Podila\x27s+Blog\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttps://pavanpodila.blogspot.com/search\x26blogLocale\x3den_US\x26v\x3d2\x26homepageUrl\x3dhttp://pavanpodila.blogspot.com/\x26vt\x3d-3240902251102105728', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Sunday, March 12, 2006

ACID2: Unit test for the Browser's rendering engine

Opera becomes the second browser which passes the ACID2 test. The first was Safari. There is a big drive to achieve standards compliance in the browser space; sparked by the WebStandards project. This is certainly good and takes away the pain to maintain separate web-pages and browser-sniffing logic for different browsers. If you have a web-based solution and your customers demand that it should work with both IE and FireFox, you may have to introduce a compatibility layer or some abstraction layer to hide away the browser differences. That is certainly some investment in time and effort. Moving forward this abstraction layer should become minimal as the adoption of web-standards increase.

But how do we test if we are standards-compliant? Here comes in the ACID tests for the browsers. It tests how good is the browser in rendering HTML + CSS markup. The tests verify that the browser uses a standards-compliant CSS box model and is also resilient to bad markup. The complete test is described in the ACID2 guide. In simple terms, the ACID2 test is just HTML + CSS markup that displays the text "Hello World!" and a smiling face below the text. The smiling face is a bunch of rows (DIV elements) styled with CSS. Here is the reference smiley face shown as image.


To test if your browser is ACID2 compliant, go here.

posted by Pavan Podila @ 11:21 AM