line-height-203.html (1561B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS2 Line height test: baseline position with 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="mismatch" href="reference/line-height-203-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 depend on the first available font."> 9 <style> 10 @font-face { 11 font-family: 'high'; 12 font-style: normal; 13 font-weight: 400; 14 src: url(/fonts/Revalia.woff) format('woff'); 15 } 16 @font-face { 17 font-family: 'deep'; 18 font-style: normal; 19 font-weight: 400; 20 src: url(/fonts/AD.woff) format('woff'); 21 } 22 23 div { 24 position: absolute; 25 line-height: 100px; 26 font-size: 100px; 27 width: 300px; /* plenty of room for the (invisible) text */ 28 text-align: right; 29 color: transparent; 30 } 31 span { /* visible thing aligned to the baseline, and small enough to not influence its position */ 32 display: inline-block; 33 width: 20px; 34 height: 20px; 35 } 36 37 /* white #h is on top of green #d, 38 but as they have different primary fonts, 39 their baselines should not line up and green #d should be visible.*/ 40 #d { font-family: deep; } 41 #d span { background: green; } 42 43 #h { font-family: high; } 44 #h span { background: white; } 45 46 </style> 47 48 <p>Test passes if there is a small green rectangle or square below. 49 50 <div id=d>aa<span></span></div> 51 <div id=h>aa<span></span></div>