ruby-position-alternate.html (2169B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-ruby/#rubypos"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <body> 6 7 <p> 8 <ruby id="a1"> 9 base 10 <rtc><rt>annotation1</rt></rtc> 11 <rtc><rt>annotation2</rt></rtc> 12 <rtc><rt>annotation3</rt></rtc> 13 </ruby> 14 </p> 15 16 <script> 17 for (const value of ['', 'alternate', 'alternate over', 'over alternate']) { 18 test(() => { 19 const a1 = document.querySelector('#a1'); 20 a1.style.rubyPosition = value; 21 const [rt1, rt2, rt3] = a1.querySelectorAll('rt'); 22 assert_rt_is_over(rt1, a1); 23 assert_rt_is_under(rt2, a1); 24 assert_rt_is_over(rt3, a1); 25 a1.style.rubyPosition = ''; 26 }, `ruby-position "${value}" alternate from over`); 27 } 28 29 for (const value of ['alternate under', 'under alternate']) { 30 test(() => { 31 const a1 = document.querySelector('#a1'); 32 a1.style.rubyPosition = value; 33 const [rt1, rt2, rt3] = a1.querySelectorAll('rt'); 34 assert_rt_is_under(rt1, a1); 35 assert_rt_is_over(rt2, a1); 36 assert_rt_is_under(rt3, a1); 37 a1.style.rubyPosition = ''; 38 }, `ruby-position "${value}" alternate from under`); 39 } 40 41 test(() => { 42 const a1 = document.querySelector('#a1'); 43 const [rtc1, rtc2] = a1.querySelectorAll('rtc'); 44 const [rt1, rt2, rt3] = a1.querySelectorAll('rt'); 45 46 rtc1.style.rubyPosition = 'under'; 47 assert_rt_is_under(rt1, a1); 48 assert_rt_is_over(rt2, a1); 49 assert_rt_is_under(rt3, a1); 50 51 rtc1.style.rubyPosition = 'over'; 52 assert_rt_is_over(rt1, a1); 53 assert_rt_is_under(rt2, a1); 54 assert_rt_is_over(rt3, a1); 55 56 rtc1.style.rubyPosition = 'alternate'; 57 rtc2.style.rubyPosition = 'under'; 58 assert_rt_is_over(rt1, a1); 59 assert_rt_is_under(rt2, a1); 60 assert_rt_is_over(rt3, a1); 61 62 rtc1.style.rubyPosition = ''; 63 rtc2.style.rubyPosition = ''; 64 }, 'ruby-position alternate from previous ruby text container'); 65 66 function assert_rt_is_over(rt, ruby) { 67 assert_true(rt.getBoundingClientRect().top < ruby.getBoundingClientRect().top); 68 } 69 70 function assert_rt_is_under(rt, ruby) { 71 assert_true(rt.getBoundingClientRect().bottom > ruby.getBoundingClientRect().bottom); 72 } 73 74 </script> 75 </body>