line-height-202.html (1722B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS2 Line height test: baseline position when explicit sizing</title> 4 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> 5 <link rel="help" href="https://drafts.csswg.org/css2/visudet.html#line-height"> 6 <link rel="match" href="reference/line-height-202-ref.html"> 7 <meta name="assert" content="The position of the baseline in an inline-level box whose height is determined by a non-normal value of line-height 8 does not depend on fonts other than the first available font"> 9 <style> 10 @font-face { 11 font-family: 'high-a-only'; 12 font-style: normal; 13 font-weight: 400; 14 src: url(/fonts/Revalia.woff) format('woff'); 15 unicode-range: U+0020, U+0061; 16 } 17 @font-face { 18 font-family: 'deep-b-only'; 19 font-style: normal; 20 font-weight: 400; 21 src: url(/fonts/AD.woff) format('woff'); 22 unicode-range: U+0062; 23 } 24 25 div { 26 position: absolute; 27 line-height: 100px; 28 font-size: 100px; 29 width: 300px; /* plenty of room for the (invisible) text */ 30 text-align: right; 31 color: transparent; 32 } 33 span { /* visible thing aligned to the baseline, and small enough to not influence its position */ 34 display: inline-block; 35 width: 20px; 36 height: 20px; 37 38 } 39 40 /* white #h is on top of red #hd, 41 and the presence of a fallback font in #hd should not influence the position of the baseline, 42 so #h should completely cover #hd, 43 and no red should be visible. */ 44 #hd { font-family: high-a-only, deep-b-only; } 45 #hd span { background: red; } 46 47 #h { font-family: high-a-only; } 48 #h span { background: white; } 49 50 </style> 51 52 <p>Test passes if there is <strong>no red</strong> below. 53 54 <div id=hd>ab<span></span></div> 55 <div id=h>aa<span></span></div>