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.
- 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.
- 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.
- Open the saved page in Chromium.
- Right-click the edit button on the web page and choose Inspect element.
- 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 |
|
|
|
|
|
- It looks like #sm_ebtn is the problem, as it overlaps the grey line. Visually we expect it to be positioned a little higher.
- 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.
- 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.
-
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 |
|
|
- 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.
- 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:
- 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]-->
- So the bug is that Orkut special-cases Internet Explorer with better positioning.
|
|
