mirror of
https://github.com/servo/servo.git
synced 2025-06-25 17:44:33 +01:00
153 lines
5.9 KiB
HTML
153 lines
5.9 KiB
HTML
<!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;
|
|
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><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>
|