| <!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> |
