Make color-filter affect caret-color
[WebKit-https.git] / LayoutTests / css3 / font-variant-small-caps-synthesis.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 /* Only test OpenType fonts for now, because our TrueType font is busted when disabling features. */
6 @font-face {
7     /* Opentype. "J" responds to smcp; "K" responds to c2sc */
8     font-family: "testfontotf";
9     src: url("resources/FontWithFeatures.otf") format("opentype");
10 }
11 @font-face {
12     /* Truetype. "S" responds to smcp; "V" responds to c2sc */
13     font-family: "testfontttf";
14     src: url("resources/FontWithFeatures.ttf") format("truetype");
15 }
16 @font-face {
17     /* Opentype. "f" responds to smcp; "g" responds to c2sc */
18     font-family: "testfontlowercasesmallcapsotf";
19     src: url("resources/FontWithFeaturesLowercaseSmallCaps.otf") format("opentype");
20 }
21 @font-face {
22     /* Truetype. "r" responds to smcp; "u" responds to c2sc */
23     font-family: "testfontlowercasesmallcapsttf";
24     src: url("resources/FontWithFeaturesLowercaseSmallCaps.ttf") format("truetype");
25 }
26 .test {
27     font-size: 20px;
28     display: inline-block;
29 }
30 </style>
31 </head>
32 <body>
33 This test makes sure that font-variant synthesis is correctly applied. The test passes when a particular pattern of Xs and checks appear below. Also note that the correct size of the character is required.
34 <div style="border: solid black 1px;">
35 <div class="test" style="font-variant-caps: small-caps;">ASDF</div>
36 <div class="test" style="font-variant-caps: small-caps;">asdf</div>
37 <div class="test" style="font-variant-caps: small-caps;">asDF</div>
38 <div class="test" style="font-variant-caps: small-caps;">ASdf</div>
39 <div class="test" style="font-variant-caps: all-small-caps;">ASDF</div>
40 <div class="test" style="font-variant-caps: all-small-caps;">asdf</div>
41 <div class="test" style="font-variant-caps: all-small-caps;">asDF</div>
42 <div class="test" style="font-variant-caps: all-small-caps;">ASdf</div>
43 </div>
44 <div style="font-family: testfontotf; border: solid black 1px; margin: 5px; font-feature-settings: 'ntrl';">
45 <div class="test">AB</div>
46 <div class="test">a</div>
47 <div class="test">J</div>
48 <div class="test">K</div>
49 <div class="test" style="font-variant-caps: small-caps;">a</div>
50 <div class="test" style="font-variant-caps: small-caps;">J</div>
51 <div class="test" style="font-variant-caps: small-caps;">aJ</div>
52 <div class="test" style="font-variant-caps: small-caps;">Ja</div>
53 <div class="test" style="font-variant-caps: small-caps;">AJ</div>
54 <div class="test" style="font-variant-caps: small-caps;">JA</div>
55 <div class="test" style="font-variant-caps: small-caps;">K</div>
56 <div class="test" style="font-variant-caps: small-caps;">aK</div>
57 <div class="test" style="font-variant-caps: small-caps;">Ka</div>
58 <div class="test" style="font-variant-caps: small-caps;">AK</div>
59 <div class="test" style="font-variant-caps: small-caps;">KA</div>
60 </div>
61 <div style="font-family: testfontttf; border: solid black 1px; margin: 5px; font-feature-settings: 'ntrl';">
62 <div class="test">AB</div>
63 <div class="test">a</div>
64 <div class="test">S</div>
65 <div class="test">V</div>
66 <div class="test" style="font-variant-caps: small-caps;">a</div>
67 <div class="test" style="font-variant-caps: small-caps;">S</div>
68 <div class="test" style="font-variant-caps: small-caps;">aS</div>
69 <div class="test" style="font-variant-caps: small-caps;">Sa</div>
70 <div class="test" style="font-variant-caps: small-caps;">AS</div>
71 <div class="test" style="font-variant-caps: small-caps;">SA</div>
72 <div class="test" style="font-variant-caps: small-caps;">V</div>
73 <div class="test" style="font-variant-caps: small-caps;">aV</div>
74 <div class="test" style="font-variant-caps: small-caps;">Va</div>
75 <div class="test" style="font-variant-caps: small-caps;">AV</div>
76 <div class="test" style="font-variant-caps: small-caps;">VA</div>
77 </div>
78 <div style="font-family: testfontlowercasesmallcapsotf; border: solid red 1px; margin: 5px; font-feature-settings: 'ntrl';">
79 <div class="test">AB</div>
80 <div class="test">a</div>
81 <div class="test">f</div>
82 <div class="test">g</div>
83 <div class="test">F</div>
84 <div class="test">G</div>
85 <div class="test" style="font-variant-caps: small-caps;">a</div>
86 <div class="test" style="font-variant-caps: small-caps;">f</div>
87 <div class="test" style="font-variant-caps: small-caps;">af</div>
88 <div class="test" style="font-variant-caps: small-caps;">fa</div>
89 <div class="test" style="font-variant-caps: small-caps;">Af</div>
90 <div class="test" style="font-variant-caps: small-caps;">fA</div>
91 <div class="test" style="font-variant-caps: small-caps;">g</div>
92 <div class="test" style="font-variant-caps: small-caps;">ag</div>
93 <div class="test" style="font-variant-caps: small-caps;">ga</div>
94 <div class="test" style="font-variant-caps: small-caps;">Ag</div>
95 <div class="test" style="font-variant-caps: small-caps;">gA</div>
96 </div>
97 <div style="font-family: testfontlowercasesmallcapsttf; border: solid red 1px; margin: 5px; font-feature-settings: 'ntrl';">
98 <div class="test">AB</div>
99 <div class="test">a</div>
100 <div class="test">r</div>
101 <div class="test">u</div>
102 <div class="test">R</div>
103 <div class="test">U</div>
104 <div class="test" style="font-variant-caps: small-caps;">a</div>
105 <div class="test" style="font-variant-caps: small-caps;">r</div>
106 <div class="test" style="font-variant-caps: small-caps;">ar</div>
107 <div class="test" style="font-variant-caps: small-caps;">ra</div>
108 <div class="test" style="font-variant-caps: small-caps;">Ar</div>
109 <div class="test" style="font-variant-caps: small-caps;">rA</div>
110 <div class="test" style="font-variant-caps: small-caps;">u</div>
111 <div class="test" style="font-variant-caps: small-caps;">au</div>
112 <div class="test" style="font-variant-caps: small-caps;">ua</div>
113 <div class="test" style="font-variant-caps: small-caps;">Au</div>
114 <div class="test" style="font-variant-caps: small-caps;">uA</div>
115 </div>
116 <div style="font-family: testfontotf; border: solid blue 1px; margin: 5px; font-feature-settings: 'ntrl';">
117 <div class="test" style="font-variant-caps: all-small-caps;">a</div>
118 <div class="test" style="font-variant-caps: all-small-caps;">J</div>
119 <div class="test" style="font-variant-caps: all-small-caps;">aJ</div>
120 <div class="test" style="font-variant-caps: all-small-caps;">Ja</div>
121 <div class="test" style="font-variant-caps: all-small-caps;">AJ</div>
122 <div class="test" style="font-variant-caps: all-small-caps;">JA</div>
123 <div class="test" style="font-variant-caps: all-small-caps;">K</div>
124 <div class="test" style="font-variant-caps: all-small-caps;">aK</div>
125 <div class="test" style="font-variant-caps: all-small-caps;">Ka</div>
126 <div class="test" style="font-variant-caps: all-small-caps;">AK</div>
127 <div class="test" style="font-variant-caps: all-small-caps;">KA</div>
128 </div>
129 <div style="font-family: testfontttf; border: solid blue 1px; margin: 5px; font-feature-settings: 'ntrl';">
130 <div class="test" style="font-variant-caps: all-small-caps;">a</div>
131 <div class="test" style="font-variant-caps: all-small-caps;">S</div>
132 <div class="test" style="font-variant-caps: all-small-caps;">aS</div>
133 <div class="test" style="font-variant-caps: all-small-caps;">Sa</div>
134 <div class="test" style="font-variant-caps: all-small-caps;">AS</div>
135 <div class="test" style="font-variant-caps: all-small-caps;">SA</div>
136 <div class="test" style="font-variant-caps: all-small-caps;">V</div>
137 <div class="test" style="font-variant-caps: all-small-caps;">aV</div>
138 <div class="test" style="font-variant-caps: all-small-caps;">Va</div>
139 <div class="test" style="font-variant-caps: all-small-caps;">AV</div>
140 <div class="test" style="font-variant-caps: all-small-caps;">VA</div>
141 </div>
142 <div style="font-family: testfontlowercasesmallcapsotf; border: solid green 1px; margin: 5px; font-feature-settings: 'ntrl';">
143 <div class="test" style="font-variant-caps: all-small-caps;">a</div>
144 <div class="test" style="font-variant-caps: all-small-caps;">f</div>
145 <div class="test" style="font-variant-caps: all-small-caps;">af</div>
146 <div class="test" style="font-variant-caps: all-small-caps;">fa</div>
147 <div class="test" style="font-variant-caps: all-small-caps;">Af</div>
148 <div class="test" style="font-variant-caps: all-small-caps;">fA</div>
149 <div class="test" style="font-variant-caps: all-small-caps;">g</div>
150 <div class="test" style="font-variant-caps: all-small-caps;">ag</div>
151 <div class="test" style="font-variant-caps: all-small-caps;">ga</div>
152 <div class="test" style="font-variant-caps: all-small-caps;">Ag</div>
153 <div class="test" style="font-variant-caps: all-small-caps;">gA</div>
154 </div>
155 <div style="font-family: testfontlowercasesmallcapsttf; border: solid green 1px; margin: 5px; font-feature-settings: 'ntrl';">
156 <div class="test" style="font-variant-caps: all-small-caps;">a</div>
157 <div class="test" style="font-variant-caps: all-small-caps;">r</div>
158 <div class="test" style="font-variant-caps: all-small-caps;">ar</div>
159 <div class="test" style="font-variant-caps: all-small-caps;">ra</div>
160 <div class="test" style="font-variant-caps: all-small-caps;">Ar</div>
161 <div class="test" style="font-variant-caps: all-small-caps;">rA</div>
162 <div class="test" style="font-variant-caps: all-small-caps;">u</div>
163 <div class="test" style="font-variant-caps: all-small-caps;">au</div>
164 <div class="test" style="font-variant-caps: all-small-caps;">ua</div>
165 <div class="test" style="font-variant-caps: all-small-caps;">Au</div>
166 <div class="test" style="font-variant-caps: all-small-caps;">uA</div>
167 </div>
168 </div>
169 </body>
170 </html>