style-access-before-stylesheet-loaded.html

<!doctype html>
<html>
<head>
<script>
let sheetLoaded = false;
if (window.testRunner) {
  testRunner.waitUntilDone();
  testRunner.dumpAsText();
}

// Since pending style sheets are script-blocking, namely, all subsequent
// <script> won't be evaluated until the sheet is loaded, this is the only way
// to start the test while the style sheet is pending.
document.addEventListener('DOMContentLoaded', () => {
  // Increase document complexity a bit
  for (n = 0; n < 500; n++) {
    let div = document.createElement('div');
    div.innerHTML = '<span></span><div><span></span></div>';
    document.body.appendChild(div);
  }

  document.getElementById('output').textContent = function() {
    if (sheetLoaded)
      return 'FAIL: test starts after style sheet is loaded';
    if (!window.internals)
      return 'FAIL: this test requires window.internals';

    var target = document.getElementById('target');
    target.offsetLeft;

    let startCount = internals.styleForElementCount();
    for (let n = 0; n < 1000; n++)
        target.offsetLeft;
    let endCount = internals.styleForElementCount();
    return startCount === endCount ? 'PASS' : 'FAIL: calling offsetLeft triggers style recalc every time';
  }();

  if (window.testRunner)
    testRunner.notifyDone();
});
</script>

<link rel=stylesheet href="http://127.0.0.1:8000/local/slow-css-pass.cgi" onload="sheetLoaded=true">

</head>
<body>
This page has a slow loading external style sheet. Calling offsetLeft shouldn't be slow when stylesheets are loading.
Works as HTTP test only.
<div id=target></div>
<div id=output></div>
</body>
</html>
chromium/third_party/blink/web_tests/http/tests/local/style-access-before-stylesheet-loaded.html
