| author | Kent Tamura <tkent@chromium.org> |
| Mon, 22 Jun 2020 10:40:43 +0000 | |
| changeset 536822 | 81b15d20a74b3209d125d4dd45291f76a8c9e5d2 |
| parent 536821 | c372cadf5bd5a89b42154c2a3a7eda5889d687d7 |
| child 536823 | 95164b155a07497bcb514ed773401744e7df7c8e |
| push id | 119680 |
| push user | wptsync@mozilla.com |
| push date | Tue, 23 Jun 2020 11:08:22 +0000 |
| treeherder | autoland@7ca3d4bada73 [default view] [failures only] |
| perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
| reviewers | testonly |
| bugs | 1645966, 24161, 1069817, 2245991, 778687 |
| milestone | 79.0a1 |
| first release with | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
| last release without | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
| testing/web-platform/tests/css/css-ruby/line-spacing.html | file | annotate | diff | comparison | revisions |
--- a/testing/web-platform/tests/css/css-ruby/line-spacing.html +++ b/testing/web-platform/tests/css/css-ruby/line-spacing.html @@ -1,18 +1,33 @@ <!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; } + +.over_emp { + -webkit-text-emphasis: 'x'; + -webkit-text-emphasis-position: over left; + text-emphasis: 'x'; + text-emphasis-position: over left; +} + +.under_emp { + -webkit-text-emphasis: 'x'; + -webkit-text-emphasis-position: under left; + text-emphasis: 'x'; + text-emphasis-position: under left; +} </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; @@ -58,15 +73,81 @@ test(() => { '<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><ruby style="ruby-position:under">base<rt>annotation</rt></ruby>' + + '<div>n</div></div>'); + const nextBlockBox = container.querySelector('div').getBoundingClientRect(); + const rtBox = rt.getBoundingClientRect(); + assert_greater_than_equal(nextBlockBox.top, rtBox.bottom); +}, 'Under ruby doesn\'t overwrap with the next 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'); + +test(() => { + const {container, ruby, rt} = renderRuby( + '<div style="line-height:1.5;">' + + '<span>First line</span><br>' + + '<span>Second line</span><br>' + + '<ruby>base<rt style="font-size:50%">' + + 'annotation</rt></ruby></div>'); + const firstLine = container.querySelector('span').getBoundingClientRect(); + const secondLine = container.querySelectorAll('span')[1].getBoundingClientRect(); + const rubyLine = ruby.getBoundingClientRect(); + assert_approx_equals(secondLine.top - firstLine.top, rubyLine.top - secondLine.top, 1); +}, 'Consume half-leading of the previous line'); + +test(() => { + const {container, ruby, rt} = renderRuby( + '<div style="line-height:1.5;">' + + '<span>First line</span><br>' + + '<span class="under_emp">Second line</span><br>' + + '<ruby>base<rt style="font-size:50%">' + + 'annotation</rt></ruby></div>'); + const firstLine = container.querySelector('span').getBoundingClientRect(); + const secondLine = container.querySelectorAll('span')[1].getBoundingClientRect(); + const rubyLine = ruby.getBoundingClientRect(); + const RUBY_EMPHASIS_SIZE = 8; + assert_greater_than_equal(rubyLine.top - secondLine.top, + secondLine.top - firstLine.top + RUBY_EMPHASIS_SIZE); +}, 'Don\'t Consume half-leading of the previous line with text-emphasis'); + +test(() => { + const {container, ruby, rt} = renderRuby( + '<div style="line-height:1.5;">' + + '<span>First line</span><br>' + + '<ruby style="ruby-position:under">base<rt style="font-size:50%">' + + 'annotation</rt></ruby><br>' + + '<span>Third line</span></div>'); + const firstLine = container.querySelector('span').getBoundingClientRect(); + const rubyLine = ruby.getBoundingClientRect(); + const thirdLine = container.querySelectorAll('span')[1].getBoundingClientRect(); + assert_approx_equals(rubyLine.top - firstLine.top, thirdLine.top - rubyLine.top, 1); +}, 'Consume half-leading of the next line'); + +test(() => { + const {container, ruby, rt} = renderRuby( + '<div style="line-height:1.5;">' + + '<span>First line</span><br>' + + '<ruby style="ruby-position:under">base<rt style="font-size:50%">' + + 'annotation</rt></ruby><br>' + + '<span class="over_emp">Third line</span>' + + '</div>'); + const firstLine = container.querySelector('span').getBoundingClientRect(); + const rubyLine = ruby.getBoundingClientRect(); + const thirdLine = container.querySelectorAll('span')[1].getBoundingClientRect(); + const RUBY_EMPHASIS_SIZE = 8; + assert_greater_than_equal(thirdLine.top - rubyLine.top, + rubyLine.top - firstLine.top + RUBY_EMPHASIS_SIZE); +}, 'Don\'t Consume half-leading of the next line with text-emphasis'); </script> </body>