<!DOCTYPE html>
<html>
<head>
<title>Test case</title>
</head>
<body>
<div style="background: green; width: 32px; height: 32px; position: absolute"></div>
<script>
window.addEventListener(
'DOMContentLoaded',
function() {
// Must dynamically fetch another stylesheet
var el = document.createElement('link');
el.href = 'data:text/css,';
el.type = 'text/css';
el.rel = 'stylesheet';
document.getElementsByTagName('head')[0].appendChild(el);
// Based on jQuery pre-1.6.2 code, which creates a temporary <body>
// element to do tests on:
// https://github.com/jquery/jquery/blob/304dd618b7aa17158446bedd80af330375d8d4d4/src/support.js#L138
// The behavior was changed for jQuery 1.6.2 with this commit:
// https://github.com/jquery/jquery/commit/ceba855c010c792aad8fc15edc06b86285f71142/
var anotherBody = document.createElement('body');
document.documentElement.insertBefore(
anotherBody, document.documentElement.firstChild);
// Triggering a style recalc here is necessary.
anotherBody.offsetHeight;
anotherBody.parentNode.removeChild(anotherBody);
},
false);
</script>
</body>
</html>