Test case for jQuery Ticket 7986

global styles might fuck up jQuery.support checks

by jitter

HTML

<h1>Shows how <code>jQuery.support</code> is affected across browsers by specific css rules</h1>
<table>
    <caption><script>document.write(navigator.userAgent);</script></caption>
    <thead>
        <tr>
            <th>Feature</th>
            <th>Before</th>
            <th>After</th>
        </tr>
    </thead>
</table>

CSS

html { font: 1em/1.5 Helvetica, Arial, sans-serif; }
code { font-family: Consolas, monospace; }
table { border-collapse: collapse; margin: 1em 0; }
td, th { border: 1px solid #fff; padding: .5em; }
th, caption { background: #e1e1e1; }
caption { padding: .5em; font-weight: bold; background: #bcbcbc; }
td { background: pink; color: red; }
.true { background: lightgreen; color: green; }
.pending { background: lightblue; color: black; }

JavaScript

function output(before, after) {
    var test, oldvalue, newvalue,
        results = {},
        output = '';
    for (test in before.support) {
        oldvalue = before.support[ test ];
        newvalue = after.support[ test ];
        //only output those affected
        if ( newvalue != oldvalue ) {
            output += '<tr><th><code>jQuery.support.' + test + '</code></th>' +
                '<td class="' + oldvalue + '"><code>' + oldvalue + '</code></td>' +
                '<td class="' + newvalue+ '"><code>' + newvalue + '</code></td></tr>';
        }
    }
    $(output).insertAfter('thead');

}

//this is the jQuery 1.4.4 object which did run without the "bad" css rule
var $j = jQuery.noConflict(true);

$j(function() {

    // add conflicting stlye
    $j("<style type='text/css'>  div { padding: 15px; } </style>").appendTo("head");

    //add jQuery 1.4.4 a second time which now gets affected by the css rule
    $j.getScript("http://code.jquery.com/jquery-1.4.4.min.js", function() {

        //give jQuery time to run
        jQuery(function() {
            output($j, jQuery);
        });

    });
});