2015-12-10 08:37:03 +00:00
<!DOCTYPE html>
< html >
< head >
< style >
@font-face {
/* Opentype. "L" responds to pcap; "M" responds to c2pc */
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 */
/* Truetype. "T" responds to smcp; "W" responds to c2sc */
font-family: "testfontttf";
src: url("resources/FontWithFeatures.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: petite-caps;" > ASDF< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > asdf< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > asDF< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > ASdf< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > ASDF< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > asdf< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > asDF< / div >
< div class = "test" style = "font-variant-caps: all-petite-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" > L< / div >
< div class = "test" > M< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > a< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > L< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > aL< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > La< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > AL< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > LA< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > M< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > aM< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > Ma< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > AM< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > MA< / 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" > T< / div >
< div class = "test" > W< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > a< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > T< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > aT< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > Ta< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > AT< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > TA< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > W< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > aW< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > Wa< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > AW< / div >
< div class = "test" style = "font-variant-caps: petite-caps;" > WA< / 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-petite-caps;" > a< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > L< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > aL< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > La< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > AL< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > LA< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > M< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > aM< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > Ma< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > AM< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > MA< / 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-petite-caps;" > a< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > T< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > aT< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > Ta< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > AT< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > TA< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > W< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > aW< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > Wa< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > AW< / div >
< div class = "test" style = "font-variant-caps: all-petite-caps;" > WA< / div >
< / div >
2015-12-10 08:37:03 +00:00
< / div >
< / body >
< / html >
