first-available-font-007.html (1671B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS-fonts: inline level box content height and first available font, missing U+0020</title> 4 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> 5 <link rel="help" href="https://drafts.csswg.org/css-fonts-3/#first-available-font"> 6 <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#first-available-font"> 7 <link rel="match" href="first-available-font-005-ref.html"> 8 <meta name="assert" content="The height of the content area of an inline-level depends only on the first available font, which is the first one to include U+0020."> 9 <style> 10 /* Two Arbitrary fonts with different metrics. One has a taller ascender, the other a deeper descender. */ 11 @font-face { 12 font-family: 'A-no-space'; 13 font-style: normal; 14 font-weight: 400; 15 src: url(/fonts/Revalia.woff) format('woff'); 16 unicode-range: U+0061; 17 } 18 @font-face { 19 font-family: 'B'; 20 font-style: normal; 21 font-weight: 400; 22 src: url(/fonts/AD.woff) format('woff'); 23 } 24 25 div { 26 font-size: 50px; 27 display: inline-block; 28 width: 40px; 29 overflow: hidden; 30 } 31 32 span { color: transparent; } 33 34 div:nth-of-type(1) { 35 font-family: B; 36 } 37 div:nth-of-type(1) span { background: red; } 38 39 /* The second div should have the same first available font as the first one, since A-no-space does no include U+0020. 40 Both div's span's should thefore overflap exactly, with the white one hiding the red. 41 */ 42 div:nth-of-type(2) { 43 font-family: A-no-space, B; 44 margin-left: -40px; 45 } 46 div:nth-of-type(2) span { background: white; } 47 </style> 48 49 <p>Test passes if there is <strong>no red</strong> below. 50 51 <div><span>aaaaa</span></div><div><span>aaaaa</span></div>