third_party/WebKit/LayoutTests/fast/text/font-variant-width.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
   5 <title>Font Width Variant Text Combine</title>
   6 <style>
   7 @font-face {
   8     font-family: LiberationSansWidthVariants;
   9     src: url(../../third_party/LiberationSansWidthVariants/liberation_sans_width_variants.ttf) format("truetype");
  10 }
  11
  12 #test {
  13     font-family: "LiberationSansWidthVariants";
  14     font-size: 24px;
  15     text-rendering: geometricPrecision;
  16     line-height: 100%;
  17     margin: 0;
  18     padding: 0px;
  19 }
  20
  21 .hwid {
  22     -webkit-font-feature-settings: 'hwid';
  23 }
  24 .twid {
  25     -webkit-font-feature-settings: 'twid';
  26 }
  27 .qwid {
  28     -webkit-font-feature-settings: 'qwid';
  29 }
  30
  31 </style>
  32     <script src="../../resources/testharness.js"></script>
  33     <script src="../../resources/testharnessreport.js"></script>
  34     <script>
  35     setup({ explicit_done: true });
  36     function testWidthVariant() {
  37         var elements = document.querySelectorAll("#test > div");
  38         for (var i = 0; i < elements.length; ++i) {
  39             var div = elements[i];
  40             var normal = div.firstChild;
  41             var text = normal.innerText;
  42             test(function () {
  43                 var hwid = addVariant(normal, "hwid");
  44                 var twid = addVariant(normal, "twid");
  45                 var qwid = addVariant(normal, "qwid");
  46                 var width = normal.getBoundingClientRect().width;
  47                 var widthHwid = hwid.getBoundingClientRect().width;
  48                 var widthTwid = twid.getBoundingClientRect().width;
  49                 var widthQwid = qwid.getBoundingClientRect().width;
  50                 assert_less_than(widthHwid, width, "hwid");
  51                 assert_less_than(widthTwid, widthHwid, "twid");
  52                 assert_less_than(widthQwid, widthTwid, "qwid");
  53             }, text);
  54         }
  55         done();
  56     }
  57     function addVariant(base, variantClassName) {
  58         var variant = base.cloneNode(true);
  59         variant.className = variantClassName;
  60         base.parentElement.appendChild(document.createTextNode(" "));
  61         base.parentElement.appendChild(variant);
  62         return variant;
  63     }
  64     </script>
  65 </head>
  66
  67 <body onload="testWidthVariant();">
  68     <div id="test">
  69         <div><span>1</span></div>
  70         <div><span>9</span></div>
  71         <div><span>22</span></div>
  72         <div><span>99</span></div>
  73         <div><span>123456</span></div>
  74         <div><span>222222</span></div>
  75         <div><span>999999</span></div>
  76     </div>
  77     <div id="log"></div>
  78 </body>
  79 </html>
  80