Testing which elements can contain pseudo elements

Each browser has a different idea of which elements can contain pseudo-elements or not. This is getting standardized, but if you view this page on different browsers you would notice different elements having the green bars with "PASS" in them. The summary of the results are in there, if that needs to be amended, fork, update and send me the link on twitter @divya Original: http://jsfiddle.net/nimbu/GvwVy/

by Jens Grochtdreis

HTML

<h1 id="title">Test for elements that have pseudo-elements <b>If you do not see a green bar with the text 'pass' below the element, it means that element cannot have a pseudo-element in the current browser.</b><b>So far<br><br><u>Presto:</u> none on hr.<br><br><u>Webkit:</u> none on img, input.submit, input.button, input.password, input.text, input.search, input.url, input.email, select, option, textarea, progress, meter<br><br><u>Firefox:</u> none on br, input (all types), select, textarea</h1>

CSS

body { font-family: sans-serif; width: 60%; margin: 5em auto; }
body * { display: block; }

#title { font-size: 2em; margin-bottom: 0.5em; }
#title b { font-size: 0.5em; display: block; margin-top: 0.5em; font-weight: normal; }
#title *:before,
#title:before{ content: ""; padding: 0; margin: 0; border: 0; }

JavaScript

var htmlelms = "h1 h2 h3 h4 p img abbr a hr acronym blockquote cite ol li ul pre dl dt dd table caption thead tr th tfoot td tbody br big code del dfn font kbd b i q s q u em strong ins code samp small span strike strong sub sup tt var address tt form fieldset legend input select option textarea progress meter".split(' '),
    inputtypes = "checkbox radio submit button password text search url email".split(' '),
    styles = [],
    style = document.createElement('style'),
    fragment = document.createDocumentFragment(),
    div, elm;

for (var i = 0, l = htmlelms.length; i < l; i++) {
    elm = htmlelms[i];

    if (elm == "input") {
        for (j = 0, k = inputtypes.length; j < k; j++) {
            testelm = document.createElement(elm);
            inputtype = inputtypes[j];
            testelm.type = inputtype;
            fragment.appendChild(document.createTextNode("input element created " + inputtype + "\n"));
            styles.push(elm + '[type="' + inputtype + '"]:before');
            fragment.appendChild(testelm);
        }

    } else {
        testelm = document.createElement(elm);
        if (elm == "img") {
            testelm = document.createElement(elm);
            testelm.src = "#";
        }

        fragment.appendChild(document.createTextNode("element created: " + elm + "\n"));
        styles.push(elm + ':before');
        fragment.appendChild(testelm);
    }
}

style.textContent = styles.join(',') + '{ display: block; background: green; content: "pass"; margin-bottom: 20px; color: white; padding: 0.25em; border: 1px solid khaki; }';

document.head.appendChild(style);
document.body.appendChild(fragment);