| <!DOCTYPE html> |
| <link rel="help" href="https://drafts.csswg.org/css-ruby/#line-height"> |
| <link rel="stylesheet" href="/fonts/ahem.css"> |
| <style> |
| body { |
| font: 16px/1 Ahem; |
| } |
| body > div { |
| border: 1px solid lime; |
| } |
| </style> |
| <body> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script> |
| function renderRuby(source) { |
| document.body.insertAdjacentHTML('afterbegin', source); |
| const firstChild = document.body.firstChild; |
| const container = firstChild.tagName == 'RUBY' ? null : firstChild; |
| const ruby = firstChild.tagName == 'RUBY' ? firstChild : firstChild.querySelector('ruby'); |
| return {container: container, ruby: ruby, rt: ruby.querySelector('rt')} |
| } |
| |
| function renderRubyAndGetBoxes(source) { |
| const {container, ruby, rt} = renderRuby(source); |
| return { |
| container: container ? container.getBoundingClientRect() : null, |
| ruby: ruby ? ruby.getBoundingClientRect() : null, |
| rt: rt ? rt.getBoundingClientRect() : null |
| }; |
| } |
| |
| test(() => { |
| const {container, ruby, rt} = renderRubyAndGetBoxes( |
| '<div><ruby>base<rt>annotation</rt></ruby></div>'); |
| assert_true(container.top <= rt.top); |
| assert_true(rt.top < ruby.top); |
| }, 'Over ruby doesn\'t overflow the block'); |
| |
| test(() => { |
| const {container, ruby, rt} = renderRubyAndGetBoxes( |
| '<div>before <span style="vertical-align:32px;">' + |
| '<ruby>base<rt>annotation</rt></ruby>' + |
| '</span> after</div>'); |
| assert_true(container.top <= rt.top); |
| assert_true(rt.top < ruby.top); |
| }, 'Over ruby + vertical-align doesn\'t overflow the block'); |
| |
| test(() => { |
| const {container, ruby, rt} = renderRubyAndGetBoxes( |
| '<div><ruby style="ruby-position:under">base<rt>annotation</rt></ruby></div>'); |
| assert_true(container.bottom >= rt.bottom); |
| assert_true(rt.bottom > ruby.bottom); |
| }, 'Under ruby doesn\'t overflow the block'); |
| |
| test(() => { |
| const {container, ruby, rt} = renderRubyAndGetBoxes( |
| '<div>before <ruby style="vertical-align:-32px; ruby-position:under">' + |
| 'base<rt>annotation</rt></ruby> after</div>'); |
| assert_true(container.bottom >= rt.bottom); |
| assert_true(rt.bottom > ruby.bottom); |
| }, 'Under ruby + vertical-align doesn\'t overflow the block'); |
| |
| test(() => { |
| const {container, ruby, rt} = renderRuby( |
| '<div><span>before</span><br><ruby>base<rt style="font-size:16px"' + |
| '>annotation</rt></ruby></div>'); |
| const firstLine = container.querySelector('span').getBoundingClientRect(); |
| assert_true(ruby.getBoundingClientRect().top - firstLine.bottom > 1); |
| }, 'Expand inter-lines spacing'); |
| </script> |
| </body> |
