Reduced test cases: edit/simplify example

Introduction

This example demonstrates the edit/simplify method of reducing a website bug. Using an Orkut.com bug that we've encountered in the past, the example steps through the reduction of 500 lines of HTML code to a final file of 35 lines. Beginning with the <head> section, all unnecessary references to CSS and JavaScript files, as well as script dependencies, are removed. Then, HTML blocks that aren't related to the rendering problem are removed from the <body> section.

Example

Save the page locally

  • Save the web page locally, making sure to select Web Page, Complete. For the purposes of this example, the saved page can be viewed here. The HTML has 565 lines of code.

Reduce the <head> section

  • Remove title and meta information. Load the test case in Chromium and verify that the rendering issue still exists. In this case the rendering issue is still present, so we can proceed with reducing the code.
  • Identify and delete unnecessary CSS dependencies. Each CSS file should be removed independently, and page rendering tested after each one. Remove the link to base026.css and load the page in Chromium, Firefox, and Internet Explorer. The page layout is broken, and the issue is no longer visible, so replace the link to this file. Repeat for castroskin016.css. If any CSS file is removed, and doesn't affect the issue, then it's unnecessary and should not be added back to the code.
  • Identify and delete unnecessary JavaScript file dependencies. Remove the reference to the first JavaScript file in the source and load the page in each browser. In this case, there's no visible change to the page after deleting this file, so it can be ignored and not added back into the code. Repeat for all JavaScript files.
  • Identify and delete unnecessary <script> dependencies. Delete one script at a time. After each deletion, load the page in Chromium, Firefox, and Internet Explorer to check the rendering. If the page layout has changed, replace the deleted code before repeating these steps with the rest of the code in the <head> section. 
After removing unnecessary <script> tags, JavaScript files, and CSS files, the HTML is now 504 lines.

Reduce the <body> section

The page being tested contains five sections: the header, footer, left navigation, right column, and center column. Because the issue exists in the center column, we can safely delete the remaining four sections:
  • Deleting the header section (<div id="header">.....</div><div id="headerbot"></div>) reduced the HTML code to 462 lines. Version 2
  • Deleting the right column (<div id="rbox">.....</div>) reduced the HTML code to 361 lines. Version 3
  • Deleting the left nav (<div id="lbox">.....</div>) reduced the HTML code to 206 lines. Version 4
  • Deleting the footer (<div id="footer>....</div>) reduced the code to 181 lines. Version 5
  • The center column contains two sections. The issue is contained within the first section, so delete the second section of the center column (3rd table module in the mbox <div>: <table class="module" border="0" cellpadding="0" cellspacing="0">....</table>) Doing so reduced the HTML to 169 lines. Version 6
  • Then, identify and delete unnecessary <script> dependencies. Deleting one script at a time (each time verifying that the issue still exists) reduced the HTML code to 140 lines. Version 7
  • After removing all extra elements from the center column heading above the status bar, as well as user data below the status bar, we're left only with the status bar containing the issue. The HTML is now reduced to 84 lines. Version 8
  • Finally, remove unnecessary block elements. Inspecting the HTML shows that a <form> tag has been nested inside multiple <div> tags. One at a time, delete the form and any <div>, <span>, and <table> tags, checking if rendering is affected each time. If rendering is affected, replace that tag before moving on to the next one. This process reduced HTML code to just 31 lines. Version 9

Reduce CSS

In this example there's an external CSS file, so copy the contents into the HTML to remove dependency on the external file. The reduced source (now at 31 lines) makes it easier to see which CSS properties are still involved with the rendering of the page - begin by deleting any unused classes and ids. Next, add a border property to the <div> to help visually identify the problem on the page. Our source will grow slightly, as we've added the contents of the external CSS file, but any irrelevant lines have been stripped out. The HTML now has 35 lines. Version 10

Identify the issue

The newly-added border on <div> elements makes the problem easy to identify. The <div> that contains the button has position:absolute and the top margin is set to 3px. It's this top margin that is causing the problem. Here is the final reduced copy: Version 11

Problem analysis

 #sm_edbtn{position:absolute; right:4px; top:3px}

Internet Explorer renders the page without an issue, because of an if statement in the head that adjusts the top margin to -1px if IE is detected. This is a bug special-casing IE with better positioning. 
Comments