layout/reftests/font-features/annotations.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <title>Annotations test</title>
   5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6
   7 <style type="text/css">
   8
   9 body {
  10   margin: 20px;
  11   font-size: 800%;
  12   font-family: Hiragino Maru Gothic ProN, Meiryo;
  13 }
  14
  15 /* for platforms without these fonts the default glyphs will show */
  16
  17 @font-feature-values Hiragino Maru Gothic ProN {
  18   @annotation { circled: 1; }
  19   @annotation { black-circled: 4; }
  20   @annotation { black-box: 8; }
  21   @annotation { black-rounded-box: 10; }
  22 }
  23
  24 @font-feature-values Meiryo {
  25   @annotation {
  26     circled: 4;
  27     black-circled: 5;
  28     black-box: 7;
  29     black-rounded-box: 9;
  30   }
  31 }
  32
  33 #test1 {
  34   font-variant-alternates: annotation(circled);
  35 }
  36
  37 #test2 {
  38   font-variant-alternates: annotation(black-circled);
  39 }
  40
  41 #test3 {
  42   font-variant-alternates: annotation(black-rounded-box);
  43 }
  44
  45 </style>
  46
  47 </head>
  48 <body>
  49 <div><span id="test1">1</span> <span id="test2">2</span> <span id="test3">3</span></div>
  50 </body>
  51 </html>