summaryrefslogtreecommitdiffstats
path: root/third_party/WebKit/LayoutTests/fast/writing-mode/text-combine-compress.html
blob: e8dc20f860c15b6044a968be2191dfc1fa328dd6 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!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>