<!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>