src/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 .vertical {
  13     font-family: "LiberationSansWidthVariants";
  14     font-size: 24px;
  15     text-rendering: geometricPrecision;
  16     -webkit-writing-mode: vertical-lr;
  17     line-height: 100%;
  18     margin: 0;
  19     padding: 0px;
  20 }
  21
  22 .combine {
  23    -webkit-text-combine: horizontal;
  24 }
  25
  26 </style>
  27     <script src="../../resources/testharness.js"></script>
  28     <script src="../../resources/testharnessreport.js"></script>
  29
  30     <script type="text/javascript">
  31     setup({ explicit_done: true });
  32     function testWidthVariant() {
  33         var EXPECTED_COMBINED_UNTIL = 8;
  34         var EXPECTED_LINE_HEIGHT = 24;
  35         var NUM_TESTS = 9;
  36         for (var testId = 0; testId < NUM_TESTS; testId++) {
  37             rectHeight = document.getElementsByClassName("combine")[testId].getBoundingClientRect().height;
  38             if (testId < EXPECTED_COMBINED_UNTIL) {
  39                 test(function() {
  40                     assert_equals(rectHeight, EXPECTED_LINE_HEIGHT, "Numbers laid out in one combining block.");
  41                 }, "Numbers expected to be laid out in one combining block");
  42             } else {
  43                 test(function() {
  44                     assert_true(rectHeight > EXPECTED_LINE_HEIGHT, EXPECTED_LINE_HEIGHT, "Number laid out vertically, not combined.");
  45             }, "Number laid out vertically, not combined.");
  46             }
  47         }
  48         done();
  49     }
  50     </script>
  51 </head>
  52
  53 <body onload="testWidthVariant();">
  54     <div class="vertical">
  55         <!-- horizontally combined -->
  56         <div><span class="combine">1</span></div>
  57         <div><span class="combine">9</span></div>
  58         <div><span class="combine">11</span></div>
  59         <div><span class="combine">99</span></div>
  60         <div><span class="combine">111</span></div>
  61         <div><span class="combine">999</span></div>
  62         <div><span class="combine">1111</span></div>
  63         <div><span class="combine">9999</span></div>
  64         <!-- vertical -->
  65         <div><span class="combine">11111</span></div>
  66         <div><span class="combine">99999</span></div>
  67         <div><span class="combine">123456</span></div>
  68         <div><span class="combine">111111</span></div>
  69         <div><span class="combine">999999</span></div>
  70     </div>
  71     <div id="log"></div>
  72 </body>
  73 </html>
  74