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