line-break-around-ruby-001.html (1497B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Ruby Test: Test line breaking before and after <ruby> elements.</title> 4 <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout"> 5 <meta name="assert" content="est line breaking before and after <ruby> elements"> 6 <meta name="flags" content="dom"> 7 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style> 11 #container > div { 12 line-height:2; 13 margin-bottom:1em; 14 } 15 </style> 16 <div id="log"></div> 17 <div id="container"> 18 <div title="OP+ID" style="width:2em;">あ(かき</div> 19 <div title="ID+CL" style="width:2em;">あい)か</div> 20 <div title="span+CL" style="width:2em;">あ<span>す</span>)か</div> 21 <div title="OP+ruby" style="width:2em;">あ(<ruby>べ<rt>る</rt></ruby>か</div> 22 <div title="ruby+CL" style="width:2em;">あ<ruby>べ<rt>る</rt></ruby>)か</div> 23 <div title="OP+ruby+CL" style="width:3em;">あ(<ruby>べ<rt>る</rt></ruby>)か</div> 24 </div> 25 <script> 26 runTests(); 27 function runTests() { 28 var lineHeight = parseFloat(getComputedStyle(container.firstElementChild).lineHeight); 29 Array.prototype.forEach.call(container.children, function (element) { 30 test(function () { 31 var lineCount = element.offsetHeight / lineHeight; 32 assert_approx_equals(lineCount, 3, 0.1); 33 }, element.title); 34 }); 35 } 36 </script>