<!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>