32 lines
1.3 KiB
HTML
32 lines
1.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<title>document.fonts.ready resolves after layout depending on loaded fonts</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-font-loading/#fontfaceset-pending-on-the-environment">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
|
<style>
|
|
#foo {
|
|
font: 100px/1 Ahem;
|
|
}
|
|
</style>
|
|
<div id="log"></div>
|
|
<span id="foo">X</span>
|
|
<script>
|
|
// The purpose of this test is to ensure that testharness.js tests can use
|
|
// `document.fonts.ready` to wait for a web font to load, without having to
|
|
// wait for the window load event before or requestAnimationFrame after.
|
|
//
|
|
// The spec says that a FontFaceSet is "pending on the environment" if "the
|
|
// document has pending layout operations which might cause the user agent to
|
|
// request a font, or which depend on recently-loaded fonts", and both are
|
|
// assumed to hold true in this test.
|
|
async_test(t => {
|
|
assert_equals(document.fonts.size, 1, 'one font is pending');
|
|
document.fonts.ready.then(t.step_func_done(() => {
|
|
const span = document.getElementById('foo');
|
|
const rect = span.getBoundingClientRect();
|
|
// If Ahem has loaded, the X will be 100px wide.
|
|
assert_equals(rect.width, 100, 'span is 100px wide');
|
|
}));
|
|
});
|
|
</script>
|