Unreviewed build fix after r201894
[WebKit-https.git] / LayoutTests / fast / text / font-face-set-cssom.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="../../resources/js-test-pre.js"></script>
5 <style id="styleElement">
6 </style>
7 </head>
8 <body>
9 <span id="item1" style="font: 48px WebFont;">l</span>
10 <span id="item2" style="font: 48px WebFont2;">l</span>
11 <span id="item3" style="font: 48px WebFont3;">l</span>
12 <span id="item4" style="font: 48px WebFont4;">l</span>
13 <span id="item5" style="font: 48px WebFont5;">l</span>
14 <span id="item6" style="font: 48px WebFont6;">l</span>
15 <script>
16 description("This test makes sure that the CSS Font Loading API plays nicely with modifying @font-face rules with the CSSOM.");
17
18 var item1 = document.getElementById("item1");
19 var item2 = document.getElementById("item2");
20 var item3 = document.getElementById("item3");
21 var item4 = document.getElementById("item4");
22 var item5 = document.getElementById("item5");
23 var item6 = document.getElementById("item6");
24
25 var fontFace = new FontFace("WebFont", "local('Ahem')", {});
26 document.fonts.add(fontFace);
27 fontFace.load();
28
29 shouldBe("item1.getBoundingClientRect().width", "48");
30 shouldNotBe("item2.getBoundingClientRect().width", "48");
31 shouldNotBe("item3.getBoundingClientRect().width", "48");
32 shouldNotBe("item4.getBoundingClientRect().width", "48");
33 shouldNotBe("item5.getBoundingClientRect().width", "48");
34 shouldNotBe("item6.getBoundingClientRect().width", "48");
35
36 var styleSheet = document.getElementById("styleElement").sheet;
37 styleSheet.insertRule("@font-face { font-family: 'WebFont2'; src: local('Ahem'); }", 0);
38
39 shouldBe("item1.getBoundingClientRect().width", "48");
40 shouldBe("item2.getBoundingClientRect().width", "48");
41 shouldNotBe("item3.getBoundingClientRect().width", "48");
42 shouldNotBe("item4.getBoundingClientRect().width", "48");
43 shouldNotBe("item5.getBoundingClientRect().width", "48");
44 shouldNotBe("item6.getBoundingClientRect().width", "48");
45
46 styleSheet.insertRule("@font-face { font-family: 'WebFont3'; src: local('Ahem'); }", 0);
47
48 shouldBe("item1.getBoundingClientRect().width", "48");
49 shouldBe("item2.getBoundingClientRect().width", "48");
50 shouldBe("item3.getBoundingClientRect().width", "48");
51 shouldNotBe("item4.getBoundingClientRect().width", "48");
52 shouldNotBe("item5.getBoundingClientRect().width", "48");
53 shouldNotBe("item6.getBoundingClientRect().width", "48");
54
55 styleSheet.deleteRule(0);
56
57 shouldBe("item1.getBoundingClientRect().width", "48");
58 shouldBe("item2.getBoundingClientRect().width", "48");
59 shouldNotBe("item3.getBoundingClientRect().width", "48");
60 shouldNotBe("item4.getBoundingClientRect().width", "48");
61 shouldNotBe("item5.getBoundingClientRect().width", "48");
62 shouldNotBe("item6.getBoundingClientRect().width", "48");
63
64 var connectedFontFace = document.fonts.keys().next().value;
65 shouldBeEqualToString("connectedFontFace.family", "WebFont2");
66
67 styleSheet.cssRules[0].style.fontFamily = "WebFont5";
68
69 shouldBeEqualToString("connectedFontFace.family", "WebFont5");
70
71 shouldBe("item1.getBoundingClientRect().width", "48");
72 shouldNotBe("item2.getBoundingClientRect().width", "48");
73 shouldNotBe("item3.getBoundingClientRect().width", "48");
74 shouldNotBe("item4.getBoundingClientRect().width", "48");
75 shouldBe("item5.getBoundingClientRect().width", "48");
76 shouldNotBe("item6.getBoundingClientRect().width", "48");
77
78 connectedFontFace.family = "WebFont6";
79
80 shouldBeEqualToString("styleSheet.cssRules[0].style.fontFamily", "WebFont6");
81
82 shouldBe("item1.getBoundingClientRect().width", "48");
83 shouldNotBe("item2.getBoundingClientRect().width", "48");
84 shouldNotBe("item3.getBoundingClientRect().width", "48");
85 shouldNotBe("item4.getBoundingClientRect().width", "48");
86 shouldNotBe("item5.getBoundingClientRect().width", "48");
87 shouldBe("item6.getBoundingClientRect().width", "48");
88
89 </script>
90 <script src="../../resources/js-test-post.js"></script>
91 </body>
92 <html>