rex-invalidation.html (1055B)
1 <!DOCTYPE html> 2 <title>CSS Values and Units Test: rex 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 rex invalidation"> 8 <style> 9 @import url("/fonts/ahem.css"); 10 html { 11 font-family: 'Ahem'; 12 font-size: 40px; 13 } 14 body { 15 font-family: monospace; 16 font-size: 20px; 17 } 18 div { 19 height: 10rex; 20 width: 10rex; 21 } 22 </style> 23 24 <html> 25 <body> 26 <div id="div"></div> 27 </body> 28 </html> 29 30 <script> 31 setup({ single_test: true }); 32 document.fonts.ready.then(() => { 33 let old_width = div.getBoundingClientRect().width; 34 document.documentElement.style.fontFamily = "sans-serif"; 35 let new_width = div.getBoundingClientRect().width; 36 assert_not_equals(old_width, new_width, "expect the x-height of Ahem and sans-serif to be different"); 37 done(); 38 }); 39 </script>