| <!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> |
