third_party/WebKit/LayoutTests/fast/writing-mode/text-combine-compress.html

   1 <!DOCTYPE html>
   2 <html lang="ja">
   3 <script src="../../resources/testharness.js"></script>
   4 <script src="../../resources/testharnessreport.js"></script>
   5 <style>
   6 @font-face {
   7     font-family:cssot;
   8     src:url(../../third_party/adobe-fonts/CSSFWOrientationTest.otf);
   9 }
  10 div > div {
  11     font-family:'MS Gothic', Ahem, cssot;
  12 }
  13 .vert {
  14     line-height:1.5;
  15     -webkit-writing-mode:vertical-rl;
  16     writing-mode:tb-rl;
  17     font-size:200%;
  18     height:300px;
  19 }
  20 .tcy {
  21     -webkit-text-combine:horizontal;
  22     -ms-text-combine-horizontal:all;
  23 }
  24 .border > span {
  25      border:black solid thin;
  26 }
  27 .kenten {
  28     line-height:1.5;
  29     -webkit-text-emphasis:sesame;
  30 }
  31 div {
  32     #border:black solid thin;
  33 }
  34 </style>
  35 <div id="container">
  36     <div>
  37         <div id="horizRef">These two lines should look identical.</div>
  38         <div id="horiz" class="tcy">These two lines should look identical.</div>
  39     </div>
  40     <div class="vert">
  41         <div>
  42             <span style="font-size:2em">&#x56FD;<span class="tcy">1234567890</span>&#x56FD;</span>
  43             <span>&#x56FD;<span class="tcy">#12</span>&#x56FD;</span>
  44             <span class="tcy" style="font-size:.5em">&#x56FD;</span>
  45             <span class="tcy">&#x56FD;</span><span class="tcy">&#x3042;</span><span class="tcy">1</span>
  46         </div>
  47         <div>
  48             <span>&#x56FD;<span class="tcy">1234567890</span>&#x56FD;</span>
  49             <span>&#x56FD;<span class="tcy">1234</span>&#x56FD;</span>
  50             <span>&#x56FD;<span class="tcy">123</span>&#x56FD;</span>
  51             <span>&#x56FD;<span class="tcy">12</span>&#x56FD;</span>
  52             <span>&#x56FD;<span class="tcy">1</span>&#x56FD;</span>
  53         </div>
  54         <div class="border">
  55             <span>&#x56FD;<span class="tcy">1234567890</span>&#x56FD;</span>
  56             <span>&#x56FD;<span class="tcy">1234</span>&#x56FD;</span>
  57             <span>&#x56FD;<span class="tcy">123</span>&#x56FD;</span>
  58             <span>&#x56FD;<span class="tcy">12</span>&#x56FD;</span>
  59             <span>&#x56FD;<span class="tcy">1</span>&#x56FD;</span>
  60         </div>
  61         <div style="text-decoration:underline;">
  62             <span>&#x56FD;<span class="tcy">1234567890</span>&#x56FD;</span>
  63             <span>&#x56FD;<span class="tcy">1234</span>&#x56FD;</span>
  64             <span>&#x56FD;<span class="tcy">123</span>&#x56FD;</span>
  65             <span>&#x56FD;<span class="tcy">12</span>&#x56FD;</span>
  66             <span>&#x56FD;<span class="tcy">1</span>&#x56FD;</span>
  67         </div>
  68         <div class="kenten">
  69             <span>&#x56FD;<span class="tcy">1234567890</span>&#x56FD;</span>
  70             <span>&#x56FD;<span class="tcy">1234</span>&#x56FD;</span>
  71             <span>&#x56FD;<span class="tcy">123</span>&#x56FD;</span>
  72             <span>&#x56FD;<span class="tcy">12</span>&#x56FD;</span>
  73             <span>&#x56FD;<span class="tcy">1</span>&#x56FD;</span>
  74         </div>
  75         <div>
  76             <span><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby><ruby><span class="tcy">1234567890</span><rt>&#x56FD;</rt></ruby><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby></span>
  77             <span><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby><ruby><span class="tcy">1234</span><rt>&#x56FD;</rt></ruby><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby></span>
  78             <span><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby><ruby><span class="tcy">123</span><rt>&#x56FD;</rt></ruby><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby></span>
  79             <span><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby><ruby><span class="tcy">12</span><rt>&#x56FD;</rt></ruby><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby></span>
  80             <span><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby><ruby><span class="tcy">1</span><rt>&#x56FD;</rt></ruby><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby></span>
  81         </div>
  82     </div>
  83 </div>
  84 <script>
  85 (function () {
  86     document.body.offsetTop;
  87     test(function () {
  88         assert_equals(horiz.offsetWidth, horizRef.offsetWidth, "width");
  89     }, "text-combine should not affect in horizontal flow.");
  90     var tcyAll = document.querySelectorAll(".vert .tcy");
  91     var maxAspectRatio = 1;
  92     for (var i = 0; i < tcyAll.length; ++i) {
  93         var tcy = tcyAll[i];
  94         test(function () {
  95             var fontSize = parseFloat(window.getComputedStyle(tcy).fontSize);
  96             var bounds = tcy.getBoundingClientRect();
  97             try {
  98                 assert_approx_equals(bounds.width, fontSize, 1, "width");
  99                 assert_approx_equals(bounds.height, fontSize, 1, "height");
 100             } catch (e) {
 101                 tcy.style.backgroundColor = 'red';
 102                 throw e;
 103             }
 104         }, "The size of text-combine elements in vertical flow.");
 105     }
 106     if (window.testRunner)
 107         document.getElementById("container").style.display = "none";
 108 })();
 109 </script>