font-weight-matching.html (5270B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Testing new font-matching algorithm for font-weight values introduced in CSS Fonts level 4</title> 5 <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-matching-algorithm" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 10 .testcase { 11 float:left; 12 margin: 5px; 13 font-size:48pt; 14 font-feature-settings: "kern" 1; 15 color: rgba(0,0,0,0.5); 16 background: linear-gradient(to left, lime 0%, lime 91px, red 91px); 17 } 18 19 @font-face { 20 font-family: fontMatch; 21 src: url('./resources/csstest-weights-900-kerned.ttf'); 22 font-weight: 100; 23 } 24 25 @font-face { 26 font-family: fontMatch; 27 src: url('./resources/csstest-weights-800-kerned.ttf'); 28 font-weight: 250; 29 } 30 31 @font-face { 32 font-family: fontMatch; 33 src: url('./resources/csstest-weights-700-kerned.ttf'); 34 font-weight: 400; 35 } 36 37 @font-face { 38 font-family: fontMatch; 39 src: url('./resources/csstest-weights-600-kerned.ttf'); 40 font-weight: 450; 41 } 42 43 @font-face { 44 font-family: fontMatch; 45 src: url('./resources/csstest-weights-300-kerned.ttf'); 46 font-weight: 500; 47 } 48 49 @font-face { 50 font-family: fontMatch; 51 src: url('./resources/csstest-weights-200-kerned.ttf'); 52 font-weight: 750; 53 } 54 55 @font-face { 56 font-family: fontMatch; 57 src: url('./resources/csstest-weights-100-kerned.ttf'); 58 font-weight: 900; 59 } 60 61 </style> 62 </head> 63 <body> 64 65 <span style="position: absolute; top: -100vh;"> 66 <span style="font-family: fontMatch; font-weight: 100;">A</span> 67 <span style="font-family: fontMatch; font-weight: 250;">A</span> 68 <span style="font-family: fontMatch; font-weight: 400;">A</span> 69 <span style="font-family: fontMatch; font-weight: 450;">A</span> 70 <span style="font-family: fontMatch; font-weight: 500;">A</span> 71 <span style="font-family: fontMatch; font-weight: 750;">A</span> 72 <span style="font-family: fontMatch; font-weight: 900;">A</span> 73 </span> 74 75 <div id="testcases" style="overflow: hidden"> 76 <!-- 77 These testcases work using the new kerned CSSTest Weights fonts. 78 The letter A and its corresponding numeric digit kern as one character. 79 --> 80 <div class="testcase" style="font-family:'CSSTest Weights W2569'; font-weight: 375;"> 81 A2 82 </div> 83 </div> 84 85 <script> 86 87 var testFontFaceMatch = [ 88 { weight: 99, expectedFont: "CSSTest Weights 900" }, 89 { weight: 100, expectedFont: "CSSTest Weights 900" }, 90 { weight: 249, expectedFont: "CSSTest Weights 900" }, 91 { weight: 250, expectedFont: "CSSTest Weights 800" }, 92 { weight: 399, expectedFont: "CSSTest Weights 800" }, 93 { weight: 400, expectedFont: "CSSTest Weights 700" }, 94 { weight: 420, expectedFont: "CSSTest Weights 600" }, 95 { weight: 470, expectedFont: "CSSTest Weights 300" }, 96 { weight: 500, expectedFont: "CSSTest Weights 300" }, 97 { weight: 600, expectedFont: "CSSTest Weights 200" }, 98 { weight: 750, expectedFont: "CSSTest Weights 200" }, 99 { weight: 751, expectedFont: "CSSTest Weights 100" }, 100 { weight: 900, expectedFont: "CSSTest Weights 100" }, 101 { weight:1000, expectedFont: "CSSTest Weights 100" }, 102 ]; 103 104 // wait for the fonts to load 105 // -- this should not be necessary if the fonts are installed as required 106 // -- but if they are not, the test is otherwise unstable 107 var once_fonts_are_ready = (document.fonts ? document.fonts.ready : new Promise(function(ready) { window.onload = time => [...document.querySelectorAll('body > span:nth-child(1) > span')].every(e => e.offsetWidth > 20) ? ready() : requestAnimationFrame(window.onload) })); 108 109 var testcases = document.querySelector("#testcases"); 110 var testcaseTemplate = document.querySelector('.testcase'); testcaseTemplate.remove(); 111 testFontFaceMatch.forEach(function(element) { 112 113 var testcase = testcaseTemplate.cloneNode(true); 114 115 // setup the test case style 116 testcase.style.fontFamily = 'fontMatch'; 117 testcase.style.fontWeight = element.weight; 118 119 // create the assertion 120 var assertText = 'A' + /\d/.exec(element.expectedFont)[0]; 121 testcase.textContent = assertText; 122 123 // append the testcase 124 testcases.appendChild(testcase); 125 126 // verify the testcase 127 promise_test( 128 assert => once_fonts_are_ready.then(assert => { assert_approx_equals(testcase.getBoundingClientRect().width, 90, 2, "@font-face should be mapped to " + element.expectedFont + "."); }), 129 "Test @font-face matching for weight " + element.weight 130 ); 131 }); 132 133 </script> 134 </body> 135 </html>