<!DOCTYPE html>
<style>
  @font-face {
    font-family: 'TestFont';
    src: url(slow-ahem-loading.cgi);
  }
</style>
<style id="RemoveMe">
  @font-face {
    font-family: 'TestFont2';
    src: url(slow-ahem-loading.cgi?2);
  }
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>

promise_test(function(t) {
    assert_false(document.fonts.check('10px TestFont'));
    assert_equals(document.fonts.status, "loaded");
    var loadPromise = document.fonts.load('10px TestFont');
    assert_equals(document.fonts.status, "loading");

    return loadPromise
        .then(function() {
            assert_true(document.fonts.check('10px TestFont'));
            return document.fonts.ready;
        }).then(function() {
            assert_equals(document.fonts.status, "loaded");
        });
}, 'FontFaceSet.status attribute');

promise_test(function(t) {
    document.fonts.load('10px TestFont2');
    assert_equals(document.fonts.status, "loading");
    var style = document.getElementById('RemoveMe');
    style.parentNode.removeChild(style);

    return document.fonts.ready
        .then(function() {
            assert_equals(document.fonts.status, "loaded");
        });
}, 'Removing @font-face while loading');

</script>