line-height-201.html (1668B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS2 Line height test: 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-201-ref.html"> 7 <meta name="assert" content="non-normal values of line-height result in the height of the inline-level box to be exactly the specified dimention, 8 even when fallback fonts with metrics different from the first available font one are used."> 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 #red { /* red to be uncovered if the test divs aren't tall enough */ 26 position: absolute; 27 background: red; 28 width: 100px; 29 height: 100px; 30 } 31 32 div:not(#red) { 33 position: absolute; 34 width: 50px; 35 line-height: 100px; 36 font-family: high-a-only, deep-b-only; 37 background: url("support/1x1-green.png") 0 0 / 50px 100px no-repeat, red; /* gets red if the div is too large */ 38 color: transparent; 39 } 40 #test { 41 font-size: 20px; /* With a font-size smaller than the line-height */ 42 } 43 #test2 { 44 margin-left: 50px; 45 font-size: 150px; /* With a font-size larger than the line-height */ 46 } 47 </style> 48 49 <p>Test passes if there is a <strong>green square</strong> and <strong>no red</strong> below. 50 51 <div id=red></div> 52 53 <div id=test>ab</div> 54 <div id=test2>ab</div>