| <!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"); |
| } |
| @font-face { |
| /* Truetype. "S" responds to smcp; "V" responds to c2sc */ |
| font-family: "testfontttf"; |
| src: url("resources/FontWithFeatures.ttf") format("truetype"); |
| } |
| @font-face { |
| /* Opentype. "f" responds to smcp; "g" responds to c2sc */ |
| font-family: "testfontlowercasesmallcapsotf"; |
| src: url("resources/FontWithFeaturesLowercaseSmallCaps.otf") format("opentype"); |
| } |
| @font-face { |
| /* Truetype. "r" responds to smcp; "u" responds to c2sc */ |
| font-family: "testfontlowercasesmallcapsttf"; |
| src: url("resources/FontWithFeaturesLowercaseSmallCaps.ttf") format("truetype"); |
| } |
| .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> |
| <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> |
| <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> |
| <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> |
| <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> |
| <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> |
| <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> |
| <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> |
| </div> |
| </div> |
| </body> |
| </html> |
