1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-ruby/#ruby-layout">
<link rel="stylesheet" href="/fonts/ahem.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
body {
font: 20px/1 Ahem;
}
</style>
<body>
<div id=container></div>
<script>
const container = document.querySelector('#container');
test(() => {
container.innerHTML = '<ruby style="position:relative">base<rt>annotation</ruby>';
const rtBefore = document.querySelector('rt').getBoundingClientRect();
document.querySelector('ruby').style.left = '100px';
const rtAfter = document.querySelector('rt').getBoundingClientRect();
assert_equals(rtBefore.x + 100, rtAfter.x);
}, 'position:relative on a ruby should move the annotation together');
test(() => {
container.innerHTML = `<span style="position:relative">
<ruby>base<rt>annotation</ruby></span>`;
const rubyBefore = document.querySelector('ruby').getBoundingClientRect();
const rtBefore = document.querySelector('rt').getBoundingClientRect();
document.querySelector('span').style.left = '100px';
const rubyAfter = document.querySelector('ruby').getBoundingClientRect();
const rtAfter = document.querySelector('rt').getBoundingClientRect();
assert_equals(rubyBefore.x + 100, rubyAfter.x);
assert_equals(rtBefore.x + 100, rtAfter.x);
}, 'position:relative on a ruby parent should move the ruby and the annotation');
test(() => {
container.innerHTML = `b<ruby style="position:relative">base
<rt style="position:relative">annotation</ruby>`;
const rtBefore = document.querySelector('rt').getBoundingClientRect();
document.querySelector('ruby').style.left = '100px';
document.querySelector('rt').style.left = '10px';
document.querySelector('rt').style.top = '-50px';
const rtAfter = document.querySelector('rt').getBoundingClientRect();
assert_equals(rtBefore.x + 110, rtAfter.x);
assert_equals(rtBefore.y - 50, rtAfter.y);
}, 'Accumulate position:relative offsets');
</script>
</body>
|
