rt-display-blockified.html (1142B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>Blockifying 'display: ruby-text' loses ruby-text functionality</title> 4 <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#block-ruby"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <style> 9 ruby { 10 font-size: 60px; 11 line-height: 1; 12 } 13 14 rt.abspos { 15 position: absolute; 16 font-size: inherit; 17 line-height: 1; 18 } 19 20 rt.float { 21 float: left; 22 font-size: inherit; 23 line-height: 1; 24 } 25 </style> 26 27 <p><ruby><span id="base">base1</span> <rt class="abspos">abspos</rt>base2 <rt class="float">float</rt></ruby></p> 28 29 <script> 30 test(() => { 31 const base = document.querySelector('#base').getBoundingClientRect(); 32 const rt = document.querySelector('.abspos').getBoundingClientRect(); 33 assert_greater_than_equal(rt.y, base.y); 34 }, 'position:absolute should not work as ruby-text'); 35 36 test(() => { 37 const base = document.querySelector('#base').getBoundingClientRect(); 38 const rt = document.querySelector('.float').getBoundingClientRect(); 39 assert_greater_than_equal(rt.y, base.y); 40 }, 'float:left should not work as ruby-text'); 41 </script>