92 lines
3.7 KiB
HTML
92 lines
3.7 KiB
HTML
<!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> |