font-size-adjust-014.html (2479B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: font-size-adjust property</title> 6 <link rel="match" href="font-size-adjust-014-ref.html"> 7 <link rel="help" href="https://www.w3.org/TR/css-fonts-5/#font-size-adjust-prop"> 8 <meta name="assert" content="Test whether from-font automatically determines a font-size-adjust value 9 based on the primary font of the element (not the font of its parent)."> 10 <style> 11 @font-face { 12 font-family: ahem-ex-500; 13 src: url('./resources/ahem-ex-500.otf'); 14 unicode-range: U+0020; 15 } 16 @font-face { 17 font-family: ahem-ex-250; 18 src: url('./resources/ahem-ex-250.otf'); 19 unicode-range: U+0020; 20 } 21 .outer { 22 font: 50px/1 monospace; 23 height: 100px; 24 } 25 .ahem250 { 26 font-family: ahem-ex-250; 27 } 28 .ahem500 { 29 font-family: ahem-ex-500; 30 } 31 .test { 32 font-family: ahem-ex-500, serif; 33 /* font-size-adjust should be computed according to the ex-height of ahem-ex-500 */ 34 font-size-adjust: from-font; 35 } 36 .ref { 37 font-family: serif; 38 font-size-adjust: 0.5; 39 } 40 .tall-inline-block { 41 display: inline-block; 42 height: 100px; 43 } 44 .description { 45 font-family: serif; 46 font-size: 16px; 47 font-size-adjust: from-font; 48 } 49 </style> 50 </head> 51 <body> 52 <div> 53 <div class="description"> 54 All four instances of "foobar" should be the same size; the font of the outer div 55 should not affect <tt>font-size-adjust:from-font</tt> on the inner. 56 </div> 57 <div class="outer"> 58 <span class="ref"> 59 foobar<span class="tall-inline-block"></span> 60 </span> 61 </div> 62 <div class="outer"> 63 <span class="test"> 64 foobar<span class="tall-inline-block"></span> 65 </span> 66 </div> 67 <div class="outer ahem250"> 68 <span class="test"> 69 foobar<span class="tall-inline-block"></span> 70 </span> 71 </div> 72 <div class="outer ahem500"> 73 <span class="test"> 74 foobar<span class="tall-inline-block"></span> 75 </span> 76 </div> 77 </div> 78 </html>