2015-12-10 08:37:03 +00:00
<!DOCTYPE html>
< html >
< head >
< style >
/* Only test OpenType fonts for now, because our TrueType font is busted when disabling features. */
@font-face {
/* Opentype. "J" responds to smcp; "K" responds to c2sc */
font-family: "testfontotf";
src: url("resources/FontWithFeatures.otf") format("opentype");
}
2015-12-15 21:55:34 +00:00
@font-face {
/* Truetype. "S" responds to smcp; "V" responds to c2sc */
font-family: "testfontttf";
src: url("resources/FontWithFeatures.ttf") format("truetype");
}
2015-12-10 08:37:03 +00:00
@font-face {
/* Opentype. "f" responds to smcp; "g" responds to c2sc */
font-family: "testfontlowercasesmallcapsotf";
src: url("resources/FontWithFeaturesLowercaseSmallCaps.otf") format("opentype");
}
2015-12-15 21:55:34 +00:00
@font-face {
/* Truetype. "r" responds to smcp; "u" responds to c2sc */
font-family: "testfontlowercasesmallcapsttf";
src: url("resources/FontWithFeaturesLowercaseSmallCaps.ttf") format("truetype");
}
2015-12-10 08:37:03 +00:00
.test {
font-size: 20px;
display: inline-block;
}
< / style >
< / head >
< body >
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.
< div style = "border: solid black 1px;" >
< div class = "test" style = "font-variant-caps: small-caps;" > ASDF< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > asdf< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > asDF< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > ASdf< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > ASDF< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > asdf< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > asDF< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > ASdf< / div >
< / div >
< div style = "font-family: testfontotf; border: solid black 1px; margin: 5px; font-feature-settings: 'ntrl';" >
< div class = "test" > AB< / div >
< div class = "test" > a< / div >
< div class = "test" > J< / div >
< div class = "test" > K< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > a< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > J< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > aJ< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > Ja< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > AJ< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > JA< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > K< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > aK< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > Ka< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > AK< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > KA< / div >
< / div >
2015-12-15 21:55:34 +00:00
< div style = "font-family: testfontttf; border: solid black 1px; margin: 5px; font-feature-settings: 'ntrl';" >
< div class = "test" > AB< / div >
< div class = "test" > a< / div >
< div class = "test" > S< / div >
< div class = "test" > V< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > a< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > S< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > aS< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > Sa< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > AS< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > SA< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > V< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > aV< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > Va< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > AV< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > VA< / div >
< / div >
2015-12-10 08:37:03 +00:00
< div style = "font-family: testfontlowercasesmallcapsotf; border: solid red 1px; margin: 5px; font-feature-settings: 'ntrl';" >
< div class = "test" > AB< / div >
< div class = "test" > a< / div >
< div class = "test" > f< / div >
< div class = "test" > g< / div >
< div class = "test" > F< / div >
< div class = "test" > G< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > a< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > f< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > af< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > fa< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > Af< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > fA< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > g< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > ag< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > ga< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > Ag< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > gA< / div >
< / div >
2015-12-15 21:55:34 +00:00
< div style = "font-family: testfontlowercasesmallcapsttf; border: solid red 1px; margin: 5px; font-feature-settings: 'ntrl';" >
< div class = "test" > AB< / div >
< div class = "test" > a< / div >
< div class = "test" > r< / div >
< div class = "test" > u< / div >
< div class = "test" > R< / div >
< div class = "test" > U< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > a< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > r< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > ar< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > ra< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > Ar< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > rA< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > u< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > au< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > ua< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > Au< / div >
< div class = "test" style = "font-variant-caps: small-caps;" > uA< / div >
< / div >
2015-12-10 08:37:03 +00:00
< div style = "font-family: testfontotf; border: solid blue 1px; margin: 5px; font-feature-settings: 'ntrl';" >
< div class = "test" style = "font-variant-caps: all-small-caps;" > a< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > J< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > aJ< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > Ja< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > AJ< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > JA< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > K< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > aK< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > Ka< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > AK< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > KA< / div >
< / div >
2015-12-15 21:55:34 +00:00
< div style = "font-family: testfontttf; border: solid blue 1px; margin: 5px; font-feature-settings: 'ntrl';" >
< div class = "test" style = "font-variant-caps: all-small-caps;" > a< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > S< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > aS< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > Sa< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > AS< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > SA< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > V< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > aV< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > Va< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > AV< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > VA< / div >
< / div >
2015-12-10 08:37:03 +00:00
< div style = "font-family: testfontlowercasesmallcapsotf; border: solid green 1px; margin: 5px; font-feature-settings: 'ntrl';" >
< div class = "test" style = "font-variant-caps: all-small-caps;" > a< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > f< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > af< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > fa< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > Af< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > fA< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > g< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > ag< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > ga< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > Ag< / div >
2015-12-15 21:55:34 +00:00
< div class = "test" style = "font-variant-caps: all-small-caps;" > gA< / div >
< / div >
< div style = "font-family: testfontlowercasesmallcapsttf; border: solid green 1px; margin: 5px; font-feature-settings: 'ntrl';" >
< div class = "test" style = "font-variant-caps: all-small-caps;" > a< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > r< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > ar< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > ra< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > Ar< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > rA< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > u< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > au< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > ua< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > Au< / div >
< div class = "test" style = "font-variant-caps: all-small-caps;" > uA< / div >
2015-12-10 08:37:03 +00:00
< / div >
< / div >
< / body >
< / html >