| <!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"); | |
| } | |
| @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"); | |
| } | |
| .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> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| </body> | |
| </html> |