rlh-invalidation.html (1284B)
1 <!DOCTYPE html> 2 <title>CSS Values and Units Test: rlh invalidation</title> 3 <link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-values/#font-relative-lengths"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <meta name="assert" content="test rlh invalidation"> 8 <style> 9 @import url("/fonts/ahem.css"); 10 html { 11 font-family: 'Ahem'; 12 font-size: 40px; 13 line-height: 2; 14 } 15 body { 16 font-family: monospace; 17 font-size: 20px; 18 line-height: 5; 19 } 20 div { 21 width: 10rlh; 22 } 23 </style> 24 25 <html> 26 <body> 27 <div id="div"></div> 28 </body> 29 </html> 30 31 <script> 32 setup({ single_test: true }); 33 document.fonts.ready.then(() => { 34 let old_width = div.getBoundingClientRect().width; 35 document.documentElement.style.lineHeight = "4"; 36 let new_width = div.getBoundingClientRect().width; 37 assert_not_equals(old_width, new_width, "expect rlh units to update on line-height update"); 38 old_width = new_width; 39 document.documentElement.style.fontSize = "41px"; 40 new_width = div.getBoundingClientRect().width; 41 assert_not_equals(old_width, new_width, "expect rlh units to update on font-size update"); 42 done(); 43 }); 44 </script>