| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Ruby Test: Test line breaking before and after <ruby> elements.</title> |
| <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout"> |
| <meta name="assert" content="est line breaking before and after <ruby> elements"> |
| <meta name="flags" content="dom"> |
| <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| #container > div { |
| line-height:2; |
| margin-bottom:1em; |
| } |
| </style> |
| <div id="log"></div> |
| <div id="container"> |
| <div title="OP+ID" style="width:2em;">あ（かき</div> |
| <div title="ID+CL" style="width:2em;">あい）か</div> |
| <div title="span+CL" style="width:2em;">あ<span>す</span>）か</div> |
| <div title="OP+ruby" style="width:2em;">あ（<ruby>べ<rt>る</rt></ruby>か</div> |
| <div title="ruby+CL" style="width:2em;">あ<ruby>べ<rt>る</rt></ruby>）か</div> |
| <div title="OP+ruby+CL" style="width:3em;">あ（<ruby>べ<rt>る</rt></ruby>）か</div> |
| </div> |
| <script> |
| runTests(); |
| function runTests() { |
| var lineHeight = parseFloat(getComputedStyle(container.firstElementChild).lineHeight); |
| Array.prototype.forEach.call(container.children, function (element) { |
| test(function () { |
| var lineCount = element.offsetHeight / lineHeight; |
| assert_approx_equals(lineCount, 3, 0.1); |
| }, element.title); |
| }); |
| } |
| </script> |
