lh-unit-003.html (1229B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Values and Units Test: lh depending on @font-face</title> 4 <link rel="help" href="https://drafts.csswg.org/css-values-4/#font-relative-lengths"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 #lh { 9 font-family: customfont; 10 font-size: 20px; 11 width: 10lh; 12 } 13 </style> 14 <div id="lh"> 15 X<br> 16 X<br> 17 X<br> 18 X<br> 19 X<br> 20 X<br> 21 X<br> 22 X<br> 23 X<br> 24 X 25 </div> 26 <script> 27 test(() => { 28 assert_equals(lh.offsetWidth, lh.offsetHeight); 29 }, "Line-height and lh before @font-face loads"); 30 31 let original_size = lh.offsetHeight; 32 33 promise_test(async (t) => { 34 let custom_font = new FontFace("customfont", "url(/css/css-fonts/support/fonts/Rochester.otf)"); 35 document.fonts.add(custom_font); 36 await document.fonts.load("20px customfont"); 37 assert_not_equals(lh.offsetHeight, original_size, 38 "Test is useless if normal line-height is the same for both the web font and the fallback font"); 39 assert_equals(lh.offsetWidth, lh.offsetHeight, 40 "lh and normal line-height both affected"); 41 }, "Line-height and lh after @font-face loaded"); 42 </script>