| <!DOCTYPE html> | 
 | <script src="../../resources/testharness.js"></script> | 
 | <script src="../../resources/testharnessreport.js"></script> | 
 | <style> | 
 | #container { | 
 |     -webkit-writing-mode:vertical-rl; | 
 | } | 
 | #container > div { | 
 |     border:solid thin black; | 
 |     font-size:20px; | 
 |     height:2em; | 
 |     line-height:1; | 
 | } | 
 | .tcy { | 
 |     -webkit-text-combine:horizontal; | 
 | } | 
 | </style> | 
 | <div id="container"> | 
 |     <div title="break after">国<span data-expected="1,0" class="tcy">123</span>国</div> | 
 |     <div title="break before">国国<span data-expected="0,1" class="tcy">123</span>国</div> | 
 |     <div title="after open">国「<span data-expected="1,1" class="tcy">123</span></div> | 
 |     <div title="before close">国<span data-expected="0,1" class="tcy">123</span>」</div> | 
 |     <div title="break after with break inside">国<span data-expected="1,0" class="tcy">国国</span>国</div> | 
 |     <div title="break before with break inside">国国<span data-expected="0,1" class="tcy">国国</span>国</div> | 
 |     <div title="after open with break inside">国「<span data-expected="1,1" class="tcy">国国</span></div> | 
 |     <div title="before close with break inside">国<span data-expected="0,1" class="tcy">国国</span>」</div> | 
 | </div> | 
 | <script> | 
 | (function () { | 
 |     var blocks = document.querySelectorAll("div[title]"); | 
 |     for (var i = 0; i < blocks.length; i++) | 
 |         testColumnAndRow(blocks[i]); | 
 |  | 
 |     function testColumnAndRow(block) { | 
 |         test(function () { | 
 |             var targets = block.querySelectorAll("span[data-expected]"); | 
 |             for (var i = 0; i < targets.length; i++) { | 
 |                 var element = targets[i]; | 
 |                 var expected = eval("[" + element.dataset.expected + "]"); | 
 |                 var actual = getColumnAndRow(element); | 
 |                 assert_array_equals(actual, expected); | 
 |             } | 
 |         }, block.title); | 
 |     } | 
 |  | 
 |     function getColumnAndRow(element) { | 
 |         var rect = element.getBoundingClientRect(); | 
 |         var block = element.parentElement.getBoundingClientRect() | 
 |         var column = rect.top - block.top; | 
 |         var row = block.right - rect.right; | 
 |         return [Math.round(column / 20), Math.round(row / 20)]; | 
 |     } | 
 | })(); | 
 |  | 
 | if (window.testRunner) | 
 |     container.style.display = "none"; | 
 | </script> |