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