summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-ruby/line-spacing.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:47:29 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:47:29 +0000
commit0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch)
treea31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-ruby/line-spacing.html
parentInitial commit. (diff)
downloadfirefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz
firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-ruby/line-spacing.html')
-rw-r--r--testing/web-platform/tests/css/css-ruby/line-spacing.html153
1 files changed, 153 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-ruby/line-spacing.html b/testing/web-platform/tests/css/css-ruby/line-spacing.html
new file mode 100644
index 0000000000..9d3c6f23e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/line-spacing.html
@@ -0,0 +1,153 @@
+<!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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-17 10:06:15 +0000