Find all CSS rules that apply to an element

Many tools/APIs provide ways of selecting elements of specific classes or IDs. There's also possible to inspect the raw stylesheets loaded by the browser.

However, for browsers to render an element, they'll compile all CSS rules (possibly from different stylesheet files) and apply it to the element. This is what you see with Firebug or the WebKit Inspector - the full CSS inheritance tree for an element.

How can I reproduce this feature in pure JavaScript without requiring additional browser plugins?

Perhaps an example can provide some clarification for what I'm looking for: