Bug 1645966 [wpt PR 24161] - RubyNG: A line shouldn't provide annotation space if it has text-emphasis, a=testonly
authorKent Tamura <tkent@chromium.org>
Mon, 22 Jun 2020 10:40:43 +0000
changeset 536805 81b15d20a74b3209d125d4dd45291f76a8c9e5d2
parent 536804 c372cadf5bd5a89b42154c2a3a7eda5889d687d7
child 536806 95164b155a07497bcb514ed773401744e7df7c8e
push id37533
push userdluca@mozilla.com
push dateTue, 23 Jun 2020 21:38:40 +0000
treeherdermozilla-central@d48aa0f0aa0b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1645966, 24161, 1069817, 2245991, 778687
milestone79.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
Bug 1645966 [wpt PR 24161] - RubyNG: A line shouldn't provide annotation space if it has text-emphasis, a=testonly Automatic update from web-platform-tests RubyNG: A line shouldn't provide annotation space if it has text-emphasis * A line has text-emphasis at the 'under' side, and the next line has ruby at 'over' side, or * A line has ruby at the 'under' side, and the next line has text-emphasis at 'over' side In these two cases, text-emphasis and ruby could be overlapped. This CL fixes this issue. Note: - The legacy ruby also has this issue, but this CL doesn't fix it for the legacy ruby. - The FAIL line in external/wpt/css/css-ruby/line-spacing-expected.txt is expected. We'll fix it soon. Bug: 1069817 Change-Id: Ie2201d577c58a77000c7ace7a1f3de718866a989 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2245991 Reviewed-by: Yoshifumi Inoue <yosin@chromium.org> Reviewed-by: Koji Ishii <kojii@chromium.org> Commit-Queue: Kent Tamura <tkent@chromium.org> Cr-Commit-Position: refs/heads/master@{#778687} -- wpt-commits: bfcaaa8a2261e974b1a162ddd4155984098e90ca wpt-pr: 24161
testing/web-platform/tests/css/css-ruby/line-spacing.html
--- 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>