<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<span id="probe1" style="font-size: 100px;">l</span>
<span id="probe2" style="font-size: 100px;">l</span>
<script>
description("This test makes sure that an ArrayBufferView can be successfully passed to the FontFace constructor.");
window.jsTestIsAsync = true;

var fontRequest = new XMLHttpRequest();
fontRequest.open("GET", "../../resources/Ahem.ttf");
fontRequest.responseType = "arraybuffer";
var fontFace1;
var fontFace2;
fontRequest.addEventListener("load", function() {
	var arrayBuffer = fontRequest.response;
	if (arrayBuffer) {
		var byteArray = new Uint8Array(arrayBuffer);
		fontFace1 = new FontFace("WebFont1", arrayBuffer, {});
		fontFace2 = new FontFace("WebFont2", byteArray, {});
		shouldBeEqualToString("fontFace1.status", "loaded");
		shouldBeEqualToString("fontFace2.status", "loaded");
		document.fonts.add(fontFace1);
		document.fonts.add(fontFace2);
		document.getElementById("probe1").style.fontFamily = "WebFont1";
		document.getElementById("probe2").style.fontFamily = "WebFont2";
		shouldEvaluateTo("document.getElementById('probe1').getBoundingClientRect().width", 100);
		shouldEvaluateTo("document.getElementById('probe2').getBoundingClientRect().width", 100);
		fontFace1.loaded.then(function() {
			return fontFace2.loaded;
		}, function() {
			testFailed("fontFace1's promise should be successful");
			finishJSTest();
		}).then(function() {
			finishJSTest();
		}, function() {
			testFailed("fontFace2's promise should be successful");
			finishJSTest();
		});
	} else {
		testFailed("XHR'ing the font should be successful.");
		finishJSTest();
	}
});
fontRequest.send();
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>