﻿<!DOCTYPE html>
<html lang="ja">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
@font-face {
    font-family:cssot;
    src:url(../../third_party/adobe-fonts/CSSFWOrientationTest.otf);
}
div > div {
    font-family:'MS Gothic', Ahem, cssot;
}
.vert {
    line-height:1.5;
    -webkit-writing-mode:vertical-rl;
    writing-mode:tb-rl;
    font-size:200%;
    height:300px;
}
.tcy {
    -webkit-text-combine:horizontal;
    -ms-text-combine-horizontal:all;
}
.border > span {
     border:black solid thin;
}
.kenten {
    line-height:1.5;
    -webkit-text-emphasis:sesame;
}
div {
    #border:black solid thin;
}
</style>
<div id="container">
    <div>
        <div id="horizRef">These two lines should look identical.</div>
        <div id="horiz" class="tcy">These two lines should look identical.</div>
    </div>
    <div class="vert">
        <div>
            <span style="font-size:2em">&#x56FD;<span class="tcy">1234567890</span>&#x56FD;</span>
            <span>&#x56FD;<span class="tcy">#12</span>&#x56FD;</span>
            <span class="tcy" style="font-size:.5em">&#x56FD;</span>
            <span class="tcy">&#x56FD;</span><span class="tcy">&#x3042;</span><span class="tcy">1</span>
        </div>
        <div>
            <span>&#x56FD;<span class="tcy">1234567890</span>&#x56FD;</span>
            <span>&#x56FD;<span class="tcy">1234</span>&#x56FD;</span>
            <span>&#x56FD;<span class="tcy">123</span>&#x56FD;</span>
            <span>&#x56FD;<span class="tcy">12</span>&#x56FD;</span>
            <span>&#x56FD;<span class="tcy">1</span>&#x56FD;</span>
        </div>
        <div class="border">
            <span>&#x56FD;<span class="tcy">1234567890</span>&#x56FD;</span>
            <span>&#x56FD;<span class="tcy">1234</span>&#x56FD;</span>
            <span>&#x56FD;<span class="tcy">123</span>&#x56FD;</span>
            <span>&#x56FD;<span class="tcy">12</span>&#x56FD;</span>
            <span>&#x56FD;<span class="tcy">1</span>&#x56FD;</span>
        </div>
        <div style="text-decoration:underline;">
            <span>&#x56FD;<span class="tcy">1234567890</span>&#x56FD;</span>
            <span>&#x56FD;<span class="tcy">1234</span>&#x56FD;</span>
            <span>&#x56FD;<span class="tcy">123</span>&#x56FD;</span>
            <span>&#x56FD;<span class="tcy">12</span>&#x56FD;</span>
            <span>&#x56FD;<span class="tcy">1</span>&#x56FD;</span>
        </div>
        <div class="kenten">
            <span>&#x56FD;<span class="tcy">1234567890</span>&#x56FD;</span>
            <span>&#x56FD;<span class="tcy">1234</span>&#x56FD;</span>
            <span>&#x56FD;<span class="tcy">123</span>&#x56FD;</span>
            <span>&#x56FD;<span class="tcy">12</span>&#x56FD;</span>
            <span>&#x56FD;<span class="tcy">1</span>&#x56FD;</span>
        </div>
        <div>
            <span><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby><ruby><span class="tcy">1234567890</span><rt>&#x56FD;</rt></ruby><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby></span>
            <span><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby><ruby><span class="tcy">1234</span><rt>&#x56FD;</rt></ruby><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby></span>
            <span><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby><ruby><span class="tcy">123</span><rt>&#x56FD;</rt></ruby><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby></span>
            <span><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby><ruby><span class="tcy">12</span><rt>&#x56FD;</rt></ruby><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby></span>
            <span><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby><ruby><span class="tcy">1</span><rt>&#x56FD;</rt></ruby><ruby>&#x56FD;<rt>&#x56FD;</rt></ruby></span>
        </div>
    </div>
</div>
<script>
(function () {
    document.body.offsetTop;
    test(function () {
        assert_equals(horiz.offsetWidth, horizRef.offsetWidth, "width");
    }, "text-combine should not affect in horizontal flow.");
    var tcyAll = document.querySelectorAll(".vert .tcy");
    var maxAspectRatio = 1;
    for (var i = 0; i < tcyAll.length; ++i) {
        var tcy = tcyAll[i];
        test(function () {
            var fontSize = parseFloat(window.getComputedStyle(tcy).fontSize);
            var bounds = tcy.getBoundingClientRect();
            try {
                assert_approx_equals(bounds.width, fontSize, 1, "width");
                assert_approx_equals(bounds.height, fontSize, 1, "height");
            } catch (e) {
                tcy.style.backgroundColor = 'red';
                throw e;
            }
        }, "The size of text-combine elements in vertical flow.");
    }
    if (window.testRunner)
        document.getElementById("container").style.display = "none";
})();
</script>