line-height-204.html (2085B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS2 Line height test: baseline position, normal sizing vs explicit sizing</title> 5 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> 6 <link rel="help" href="https://drafts.csswg.org/css2/visudet.html#line-height"> 7 <link rel="match" href="reference/line-height-202-ref.html"> 8 <meta name="assert" content="The position of the baseline in an inline-level box whose line-height is normal 9 and the position of the baseline in an inline-level box whose line-height is set to a non normal value resulting in the same height 10 are the same, 11 assuming only the first available font is used."> 12 <style> 13 @font-face { 14 font-family: 'high'; 15 font-style: normal; 16 font-weight: 400; 17 src: url(/fonts/Revalia.woff) format('woff'); 18 } 19 20 div { 21 position: absolute; 22 font-size: 100px; 23 width: 2em; /* plenty of room for the (invisible) text */ 24 text-align: right; 25 color: transparent; 26 } 27 span { /* visible thing aligned to the baseline, and small enough to not influence its position */ 28 display: inline-block; 29 width: 20px; 30 height: 20px; 31 } 32 33 /* white #lh-auto is on top of red #lh-manual, 34 and as their baselines should line up 35 #lh-manual should be fully covered, 36 and no red should be visible */ 37 #lh-manual { font-family: high; } 38 #lh-manual span { background: red; } 39 40 #lh-auto { font-family: high; line-height: normal; } 41 #lh-auto span { background: white; } 42 43 </style> 44 45 <body onload="measure()"> 46 <p>Test passes if there is <strong>no red</strong> below. 47 48 <div id=lh-manual>a<span></span></div> 49 <div id=lh-auto>a<span></span></div> 50 51 <script> 52 function measure() { /* let layout complete first, so that we can measure things */ 53 var lha = document.getElementById("lh-auto"); 54 var lhm = document.getElementById("lh-manual") 55 var h = window.getComputedStyle(lha).height; /*getting the used-value of line-height by proxy */ 56 lhm.style.lineHeight = h; 57 document.documentElement.className = ""; 58 } 59 </script>