<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style id="styleElement">
</style>
</head>
<body>
<span id="item1" style="font: 48px WebFont;">l</span>
<span id="item2" style="font: 48px WebFont2;">l</span>
<span id="item3" style="font: 48px WebFont3;">l</span>
<span id="item4" style="font: 48px WebFont4;">l</span>
<span id="item5" style="font: 48px WebFont5;">l</span>
<span id="item6" style="font: 48px WebFont6;">l</span>
<script>
description("This test makes sure that the CSS Font Loading API plays nicely with modifying @font-face rules with the CSSOM.");

var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");
var item4 = document.getElementById("item4");
var item5 = document.getElementById("item5");
var item6 = document.getElementById("item6");

var fontFace = new FontFace("WebFont", "local('Ahem')", {});
document.fonts.add(fontFace);
fontFace.load();

shouldBe("item1.getBoundingClientRect().width", "48");
shouldNotBe("item2.getBoundingClientRect().width", "48");
shouldNotBe("item3.getBoundingClientRect().width", "48");
shouldNotBe("item4.getBoundingClientRect().width", "48");
shouldNotBe("item5.getBoundingClientRect().width", "48");
shouldNotBe("item6.getBoundingClientRect().width", "48");

var styleSheet = document.getElementById("styleElement").sheet;
styleSheet.insertRule("@font-face { font-family: 'WebFont2'; src: local('Ahem'); }", 0);

shouldBe("item1.getBoundingClientRect().width", "48");
shouldBe("item2.getBoundingClientRect().width", "48");
shouldNotBe("item3.getBoundingClientRect().width", "48");
shouldNotBe("item4.getBoundingClientRect().width", "48");
shouldNotBe("item5.getBoundingClientRect().width", "48");
shouldNotBe("item6.getBoundingClientRect().width", "48");

styleSheet.insertRule("@font-face { font-family: 'WebFont3'; src: local('Ahem'); }", 0);

shouldBe("item1.getBoundingClientRect().width", "48");
shouldBe("item2.getBoundingClientRect().width", "48");
shouldBe("item3.getBoundingClientRect().width", "48");
shouldNotBe("item4.getBoundingClientRect().width", "48");
shouldNotBe("item5.getBoundingClientRect().width", "48");
shouldNotBe("item6.getBoundingClientRect().width", "48");

styleSheet.deleteRule(0);

shouldBe("item1.getBoundingClientRect().width", "48");
shouldBe("item2.getBoundingClientRect().width", "48");
shouldNotBe("item3.getBoundingClientRect().width", "48");
shouldNotBe("item4.getBoundingClientRect().width", "48");
shouldNotBe("item5.getBoundingClientRect().width", "48");
shouldNotBe("item6.getBoundingClientRect().width", "48");

var connectedFontFace = document.fonts.keys().next().value;
shouldBeEqualToString("connectedFontFace.family", "WebFont2");

styleSheet.cssRules[0].style.fontFamily = "WebFont5";

shouldBeEqualToString("connectedFontFace.family", "WebFont5");

shouldBe("item1.getBoundingClientRect().width", "48");
shouldNotBe("item2.getBoundingClientRect().width", "48");
shouldNotBe("item3.getBoundingClientRect().width", "48");
shouldNotBe("item4.getBoundingClientRect().width", "48");
shouldBe("item5.getBoundingClientRect().width", "48");
shouldNotBe("item6.getBoundingClientRect().width", "48");

connectedFontFace.family = "WebFont6";

shouldBeEqualToString("styleSheet.cssRules[0].style.fontFamily", "WebFont6");

shouldBe("item1.getBoundingClientRect().width", "48");
shouldNotBe("item2.getBoundingClientRect().width", "48");
shouldNotBe("item3.getBoundingClientRect().width", "48");
shouldNotBe("item4.getBoundingClientRect().width", "48");
shouldNotBe("item5.getBoundingClientRect().width", "48");
shouldBe("item6.getBoundingClientRect().width", "48");

</script>
<script src="../../resources/js-test-post.js"></script>
</body>
<html>