<html>
<head>
<script src="../../resources/js-test.js"></script>
<style>
body {
  font-family: serif;
}
@font-face {
  font-family: 'ahem';
  src: url(../../resources/Ahem.ttf);
}
#test {
  position: absolute
}
#test span {
  font-family: ahem;
}
</style>
<script>
description('Test that onloadingdone is fired after style recalculation.');

window.jsTestIsAsync = true;

function runTests() {
    document.fonts.onloadingdone = function() {
        debug('loadingdone');
        testDiv = document.getElementById('test');
        shouldBeEqualToString('window.getComputedStyle(testDiv, 0).width', '48px');
    };

    document.fonts.ready.then(function() {
        debug('ready promise fulfilled');
        shouldBeEqualToString('window.getComputedStyle(testDiv, 0).width', '48px');
        finishJSTest();
    });
}

if (document.fonts)
    runTests();
else {
    testFailed('document.fonts does not exist');
    finishJSTest();
}
</script>
</head>
<body>
  <div id=test>
    <a href="#">
      <span>aaa</span>
    </a>
  </div>
</body>
</html>