Reduced test cases: using the element inspector

Introduction

This examples demonstrates the use of Chromium's element inspector to identify the source of rendering issues. It can be used in conjunction with the edit/simplify method to create reduced test cases for Chromium bugs.

Example

The page being tested is an Orkut.com bug that we had encountered in the past. The edit button isn't displaying properly in Chromium, though it appears correctly in Internet Explorer.
  1. Save the web page's HTML locally (making sure to choose Web Page, Complete). For the purposes of this example, the saved page can be viewed here.
  2. Check if the problem still exists in the saved copy:

    Chromium: yes
    Internet Explorer 7: no
    Firefox 3: yes

    There is a reproducible difference between Internet Explorer and Chromium.

  3. Open the saved page in Chromium.
  4. Right-click the edit button on the web page and choose Inspect element.
  5. In the inspector window, the node's ancestry is displayed at the bottom:

    Hovering the mouse over a node in the inspector causes it to be highlighted in yellow on the page:

    div#statusMessageShow #sm_ebtn span a.btn

  6. It looks like #sm_ebtn is the problem, as it overlaps the grey line. Visually we expect it to be positioned a little higher.
  7. Select #sm_ebtn by clicking on it in the breadcrumb trail. The right pane of the inspector now shows all styles that are applied to that node.
  8. Next, find which styles are assigned to the same node in Internet Explorer, to see how they differ. The Internet Explorer Developer Toolbar is an inspector-like tool for Internet Explorer.
  9. With both sets of styles side by side, look for any style differences that could affect vertical positioning:

    Internet Explorer Chromium
    Property Current Value
    border-bottom-color #000
    border-color #000
    border-left-color #000
    border-right-color #000
    border-top-color #000
    color #000
    display block
    font-family Verdana,Arial,sans-serif
    font-size 12px
    hasLayout -1
    margin 0px
    margin-bottom 0px
    margin-left 0px
    margin-right 0px
    margin-top 0px
    position absolute
    right 4px
    srollbar-base-color #000
    text-align right
    top -1px


  10. The node is being absolutely positioned, and highlighted in red is an important difference: in Internet Explorer, the value of top is -1px, whereas in Chromium it is 3px.
  11. To confirm that this is the problem, change Chromium's value of top from 3px to -1px and see if the button displays correctly. This is done by double-clicking the property, then typing in the new value:

    We see the effects immediately — the button is now correctly positioned:

  12. All that remains now is to determine why the value of top was different in Internet Explorer. Doing a find in the page's source for "sm_ebtn" finds the culprit, which is an IE-conditional style:
    <!--[if IE]>
    <style type="text/css">
    #sm_edbtn {top:-1px}
    #statusMessageShow {height:19px}
    </style>
    <![endif]-->
  13. So the bug is that Orkut special-cases Internet Explorer with better positioning.
Comments