lh-rlh-on-root-001.html (4625B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Values and Units Test: using lh and rlh units on the root element</title> 4 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> 5 <link rel="help" href="https://drafts.csswg.org/css-values-4/#font-relative-lengths"> 6 <style> 7 #measure_me { position: absolute; } 8 </style> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 12 <div id=measure_me> </div> 13 14 <script> 15 function get_root_font_size() { 16 return parseFloat(window.getComputedStyle(window.document.documentElement).fontSize); 17 } 18 function get_root_line_height() { 19 /* getComputedStyle returns the computed value (not the used value) for the line-height property, 20 and the computed value of line-height:normal is normal, 21 so we cannot just query the value fo the proerty directly on the root element. 22 However the height of an abspos that only contains a single character from the first available font 23 and doesn't have any ancestor that changes the font-size or line-height property 24 gives us an indirect way to measure the root line-height in px. 25 */ 26 return parseFloat(window.getComputedStyle(document.getElementById("measure_me")).height); 27 } 28 29 window.document.documentElement.style="font-size: initial; line-height:initial;"; 30 initial_f_s = get_root_font_size(); 31 initial_l_h = get_root_line_height(); 32 33 test(function() { 34 window.document.documentElement.style="font-size: 142px; line-height: 1lh;"; 35 l_h = get_root_line_height(); 36 assert_approx_equals( l_h, initial_l_h, 1, "the lh unit on the root element's line-height property uses font metrics corresponding to the initial values of the font or line-height properties"); 37 }, "lh in line-height on root"); 38 39 test(function() { 40 window.document.documentElement.style="font-size: 142px; line-height: 1rlh;"; 41 l_h = get_root_line_height(); 42 assert_approx_equals( l_h, initial_l_h, 1, "the rlh unit on the root element's line-height property uses font metrics corresponding to the initial values of the font or line-height properties"); 43 }, "rlh in line-height on root"); 44 45 test(function() { 46 window.document.documentElement.style="font-size: 1lh; line-height: 142px;"; 47 f_s = get_root_font_size(); 48 assert_approx_equals( f_s, initial_l_h, 1, "the lh unit on the root element's font-size property uses font metrics corresponding to the initial values of the font or line-height properties"); 49 }, "lh in font-size on root"); 50 51 test(function() { 52 window.document.documentElement.style="font-size: 1rlh; line-height: 142px;"; 53 f_s = get_root_font_size(); 54 assert_approx_equals( f_s, initial_l_h, 1, "the rlh unit on the root element's font-size property uses font metrics corresponding to the initial values of the font or line-height properties"); 55 56 }, "rlh in font-size on root"); 57 58 59 test(function() { 60 window.document.documentElement.style="font-size: 142px; line-height: 2lh;"; 61 l_h = get_root_line_height(); 62 assert_approx_equals( l_h, initial_l_h * 2, 1, "the lh unit on the root element's line-height property actually works as a unit and doesn't merely cause a fallback that doesn't take the number of units into account"); 63 }, "2lh in line-height on root"); 64 65 test(function() { 66 window.document.documentElement.style="font-size: 142px; line-height: 2rlh;"; 67 l_h = get_root_line_height(); 68 assert_approx_equals( l_h, initial_l_h * 2, 1, "the rlh unit on the root element's line-height property actually works as a unit and doesn't merely cause a fallback that doesn't take the number of units into account"); 69 }, "2rlh in line-height on root"); 70 71 test(function() { 72 window.document.documentElement.style="font-size: 2lh; line-height: 142px;"; 73 f_s = get_root_font_size(); 74 assert_approx_equals( f_s, initial_l_h * 2, 1, "the lh unit on the root element's font-size property actually works as a unit and doesn't merely cause a fallback that doesn't take the number of units into account"); 75 }, "2lh in font-size on root"); 76 77 test(function() { 78 window.document.documentElement.style="font-size: 2rlh; line-height: 142px;"; 79 f_s = get_root_font_size(); 80 assert_approx_equals( f_s, initial_l_h * 2, 1, "the rlh unit on the root element's font-size property actually works as a unit and doesn't merely cause a fallback that doesn't take the number of units into account"); 81 82 }, "2rlh in font-size on root"); 83 84 /*make the test result page readable again*/ 85 window.document.documentElement.style="font-size: initial; line-height: initial;"; 86 </script>