<!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">国<span class="tcy">1234567890</span>国</span>
<span>国<span class="tcy">#12</span>国</span>
<span class="tcy" style="font-size:.5em">国</span>
<span class="tcy">国</span><span class="tcy">あ</span><span class="tcy">1</span>
</div>
<div>
<span>国<span class="tcy">1234567890</span>国</span>
<span>国<span class="tcy">1234</span>国</span>
<span>国<span class="tcy">123</span>国</span>
<span>国<span class="tcy">12</span>国</span>
<span>国<span class="tcy">1</span>国</span>
</div>
<div class="border">
<span>国<span class="tcy">1234567890</span>国</span>
<span>国<span class="tcy">1234</span>国</span>
<span>国<span class="tcy">123</span>国</span>
<span>国<span class="tcy">12</span>国</span>
<span>国<span class="tcy">1</span>国</span>
</div>
<div style="text-decoration:underline;">
<span>国<span class="tcy">1234567890</span>国</span>
<span>国<span class="tcy">1234</span>国</span>
<span>国<span class="tcy">123</span>国</span>
<span>国<span class="tcy">12</span>国</span>
<span>国<span class="tcy">1</span>国</span>
</div>
<div class="kenten">
<span>国<span class="tcy">1234567890</span>国</span>
<span>国<span class="tcy">1234</span>国</span>
<span>国<span class="tcy">123</span>国</span>
<span>国<span class="tcy">12</span>国</span>
<span>国<span class="tcy">1</span>国</span>
</div>
<div>
<span><ruby>国<rt>国</rt></ruby><ruby><span class="tcy">1234567890</span><rt>国</rt></ruby><ruby>国<rt>国</rt></ruby></span>
<span><ruby>国<rt>国</rt></ruby><ruby><span class="tcy">1234</span><rt>国</rt></ruby><ruby>国<rt>国</rt></ruby></span>
<span><ruby>国<rt>国</rt></ruby><ruby><span class="tcy">123</span><rt>国</rt></ruby><ruby>国<rt>国</rt></ruby></span>
<span><ruby>国<rt>国</rt></ruby><ruby><span class="tcy">12</span><rt>国</rt></ruby><ruby>国<rt>国</rt></ruby></span>
<span><ruby>国<rt>国</rt></ruby><ruby><span class="tcy">1</span><rt>国</rt></ruby><ruby>国<rt>国</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>
Codebase Browser
chromium