alternates-order.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. @font-face {
  6. font-family: libertine;
  7. src: url(../fonts/LinLibertine_Re-4.7.5.woff) format("woff");
  8. }
  9. @font-face {
  10. font-family: fontA;
  11. src: url(../fonts/LinLibertine_Re-4.7.5.woff) format("woff");
  12. font-feature-settings: "ss05" on;
  13. }
  14. @font-face {
  15. font-family: fontB;
  16. src: url(../fonts/LinLibertine_Re-4.7.5.woff) format("woff");
  17. font-feature-settings: "ss05" off;
  18. }
  19. @font-feature-values libertine {
  20. @styleset {
  21. crossed-doubleu: 5;
  22. somethingElse: 4;
  23. }
  24. }
  25. @font-feature-values fontA {
  26. @styleset { aLtW: 5; }
  27. }
  28. @font-feature-values fontB {
  29. @styleset { crossedW: 5; several: 1 3 5; }
  30. @styleset { altW: 4; }
  31. }
  32. @font-feature-values fontB {
  33. @styleset {
  34. AlTw: 5;
  35. defined-for-fontB: 5;
  36. scriptJ: 3;
  37. }
  38. }
  39. body {
  40. font-family: libertine, sans-serif;
  41. font-size: 800%;
  42. line-height: 1.2em;
  43. }
  44. /* font-feature-settings: "ss05"; crossed W */
  45. div { margin: 0 20px; }
  46. #test1 {
  47. font-variant-alternates: styleset(crossed-doubleu);
  48. }
  49. #test2 {
  50. /* testing case-insensitivity of styleset name */
  51. font-family: fontB;
  52. font-variant-alternates: styleset(altW);
  53. }
  54. #test3 {
  55. /* testing case-insensitivity of styleset name */
  56. font-family: fontB;
  57. font-variant-alternates: styleset(ALTW);
  58. }
  59. #test4 {
  60. /* testing escapes in styleset name */
  61. font-family: fontB;
  62. font-variant-alternates: styleset(\41 ltW);
  63. }
  64. #test5 {
  65. /* testing font-specificity of feature value rule */
  66. font-family: fontA;
  67. font-variant-alternates: styleset(defined-for-fontB);
  68. }
  69. #test6 {
  70. /* testing one feature doesn't affect another */
  71. font-variant-alternates: styleset(somethingElse);
  72. font-feature-settings: "ss05" on;
  73. }
  74. #test7 {
  75. /* testing font-specificity of feature value rule */
  76. font-family: fontA;
  77. font-variant-alternates: styleset(scriptJ);
  78. font-feature-settings: "ss06";
  79. }
  80. #test8 {
  81. /* testing that an undefined value doesn't affect the results */
  82. font-family: fontB;
  83. font-variant-alternates: styleset(scriptJ, somethingUndefined, defined-for-fontB);
  84. }
  85. #test9 {
  86. /* testing matching of font name with escape */
  87. font-family: font\62 ;
  88. font-variant-alternates: styleset(defined-for-fontB);
  89. }
  90. </style>
  91. </head>
  92. <body lang="en">
  93. <div><span id="test1">W</span> <span id="test2">W</span> <span id="test3">W</span></div>
  94. <div><span id="test4">W</span> <span id="test5">W</span> <span id="test6">W</span></div>
  95. <div><span id="test7">W</span> <span id="test8">W</span> <span id="test9">W</span></div>
  96. </body>
  97. </html>