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

   1 <!DOCTYPE html>
   2 <script src="../../resources/testharness.js"></script>
   3 <script src="../../resources/testharnessreport.js"></script>
   4 <style>
   5 #container {
   6     -webkit-writing-mode:vertical-rl;
   7 }
   8 #container > div {
   9     border:solid thin black;
  10     font-size:20px;
  11     height:2em;
  12     line-height:1;
  13 }
  14 .tcy {
  15     -webkit-text-combine:horizontal;
  16 }
  17 </style>
  18 <div id="container">
  19     <div title="break after">&#x56FD;<span data-expected="1,0" class="tcy">123</span>&#x56FD;</div>
  20     <div title="break before">&#x56FD;&#x56FD;<span data-expected="0,1" class="tcy">123</span>&#x56FD;</div>
  21     <div title="after open">&#x56FD;&#x300C;<span data-expected="1,1" class="tcy">123</span></div>
  22     <div title="before close">&#x56FD;<span data-expected="0,1" class="tcy">123</span>&#x300D;</div>
  23     <div title="break after with break inside">&#x56FD;<span data-expected="1,0" class="tcy">&#x56FD;&#x56FD;</span>&#x56FD;</div>
  24     <div title="break before with break inside">&#x56FD;&#x56FD;<span data-expected="0,1" class="tcy">&#x56FD;&#x56FD;</span>&#x56FD;</div>
  25     <div title="after open with break inside">&#x56FD;&#x300C;<span data-expected="1,1" class="tcy">&#x56FD;&#x56FD;</span></div>
  26     <div title="before close with break inside">&#x56FD;<span data-expected="0,1" class="tcy">&#x56FD;&#x56FD;</span>&#x300D;</div>
  27 </div>
  28 <script>
  29 (function () {
  30     var blocks = document.querySelectorAll("div[title]");
  31     for (var i = 0; i < blocks.length; i++)
  32         testColumnAndRow(blocks[i]);
  33
  34     function testColumnAndRow(block) {
  35         test(function () {
  36             var targets = block.querySelectorAll("span[data-expected]");
  37             for (var i = 0; i < targets.length; i++) {
  38                 var element = targets[i];
  39                 var expected = eval("[" + element.dataset.expected + "]");
  40                 var actual = getColumnAndRow(element);
  41                 assert_array_equals(actual, expected);
  42             }
  43         }, block.title);
  44     }
  45
  46     function getColumnAndRow(element) {
  47         var rect = element.getBoundingClientRect();
  48         var block = element.parentElement.getBoundingClientRect()
  49         var column = rect.top - block.top;
  50         var row = block.right - rect.right;
  51         return [Math.round(column / 20), Math.round(row / 20)];
  52     }
  53 })();
  54
  55 if (window.testRunner)
  56     container.style.display = "none";
  57 </script>