| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Testing @font-face font matching logic introduced in CSS Fonts level 4</title> |
| <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-matching-algorithm" /> |
| <meta name="timeout" content="long"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| .test |
| { |
| float:left; |
| border:1px solid red; |
| font-size:24pt; |
| white-space: nowrap; |
| clear:both; |
| } |
| |
| @font-face { font-family: W100; src: url('./resources/csstest-weights-100-kerned.ttf'); } |
| @font-face { font-family: W200; src: url('./resources/csstest-weights-200-kerned.ttf'); } |
| @font-face { font-family: W300; src: url('./resources/csstest-weights-300-kerned.ttf'); } |
| |
| |
| @font-face { font-family: descriptorPriorityTest; src: url('./resources/csstest-weights-100-kerned.ttf'); font-stretch : 125%; } |
| @font-face { font-family: descriptorPriorityTest; src: url('./resources/csstest-weights-200-kerned.ttf'); font-style: italic; } |
| @font-face { font-family: descriptorPriorityTest; src: url('./resources/csstest-weights-300-kerned.ttf'); font-weight: 350; } |
| </style> |
| <style id="dynamicStyles"> |
| </style> |
| </head> |
| <body> |
| |
| <span style="position: absolute; top: -100vh;"> |
| <span style="font-family: 'W100';">A</span> |
| <span style="font-family: 'W200';">A</span> |
| <span style="font-family: 'W300';">A</span> |
| <span style="font-family: 'descriptorPriorityTest'; font-stretch: 125%;">A</span> |
| <span style="font-family: 'descriptorPriorityTest'; font-style: italic;">A</span> |
| <span style="font-family: 'descriptorPriorityTest'; font-weight: 350;">A</span> |
| </span> |
| |
| <div id="master" class="test">A1 A2 A2 A3 A3 A3</div> |
| <div id="test" class="test">A1 A2 A2 A3 A3 A3</div> |
| <div style="clear:both"></div> |
| <script> |
| |
| // wait for the fonts to load |
| // -- this should not be necessary if the fonts are installed as required |
| // -- but if they are not, the test is otherwise unstable |
| 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) })); |
| |
| var masterElement = document.getElementById("master"); |
| var testElement = document.getElementById("test"); |
| var dynamicStyles = document.getElementById("dynamicStyles"); |
| |
| function verifyFont(testFamily, testWeight, testStyle, testStretch, expectedFamily) { |
| |
| testElement.style.fontWeight = "normal"; |
| testElement.style.fontStyle = "normal"; |
| testElement.style.fontStretch = "normal"; |
| |
| masterElement.style.fontFamily = expectedFamily; |
| let masterWidth = masterElement.offsetWidth; |
| |
| testElement.style.fontFamily = expectedFamily; |
| assert_equals(masterWidth, testElement.offsetWidth, "Sanity test: same family name gets same width" + dynamicStyles.innerHTML); |
| |
| testElement.style.fontFamily = "serif"; |
| assert_not_equals(masterWidth, testElement.offsetWidth, "Sanity test: different family get different width"); |
| |
| testElement.style.fontWeight = testWeight; |
| testElement.style.fontStyle = testStyle; |
| testElement.style.fontStretch = testStretch; |
| testElement.style.fontFamily = testFamily; |
| |
| assert_true(masterWidth == testElement.offsetWidth, "Unexpected font on test element"); |
| } |
| |
| var descriptorPriorityCases = [ |
| { weight: "normal", style: "oblique -5deg", stretch: "125%", expectedFamily: "'W100'", description: "Stretch has higher priority than style"}, |
| { weight: "350", style: "normal", stretch: "125%", expectedFamily: "'W100'", description: "Stretch has higher priority than weight"}, |
| { weight: "350", style: "oblique -5deg", stretch: "normal", expectedFamily: "'W200'", description: "Style has higher priority than weight"} |
| ]; |
| |
| descriptorPriorityCases.forEach(function (testCase) { |
| promise_test(() => { |
| return once_fonts_are_ready |
| .then(() => verifyFont("descriptorPriorityTest", testCase.weight, testCase.style, testCase.stretch, testCase.expectedFamily)); |
| }, |
| "Descriptor matching priority: " + testCase.description |
| ); |
| }); |
| |
| function load(family, name, value) { |
| const el1 = document.createElement("span"); |
| const el2 = document.createElement("span"); |
| el1.innerText = "A"; |
| el2.innerText = "A"; |
| let value1, value2; |
| if (value.indexOf("deg") > 0) { |
| value1 = "oblique " + value.split(" ")[1]; |
| value2 = "oblique " + (value.split(" ")[2] || value.split(" ")[1]); |
| } else { |
| value1 = value.split(" ")[0]; |
| value2 = value.split(" ")[1] || value1; |
| } |
| el1.style[name] = value1; |
| el2.style[name] = value2; |
| document.body.appendChild(el1); |
| document.body.appendChild(el2); |
| const initialWidth1 = el1.offsetWidth; |
| const initialWidth2 = el2.offsetWidth; |
| return new Promise((resolve) => { |
| el1.style.fontFamily = family; |
| el2.style.fontFamily = family; |
| (function check() { |
| if (el1.offsetWidth !== initialWidth1 && el2.offsetWidth !== initialWidth2) { |
| el1.remove(); |
| el2.remove(); |
| resolve(); |
| } else { |
| requestAnimationFrame(check); |
| } |
| }()); |
| }); |
| } |
| function createFontFaceRules(fontFaceFamily, descriptorName, expectedMatch, unexpectedMatch) { |
| dynamicStyles.innerHTML = |
| "@font-face { font-family: " + fontFaceFamily + "; src: url('./resources/csstest-weights-100-kerned.ttf'); "+ descriptorName + ": " + expectedMatch + "; }" + |
| "@font-face { font-family: " + fontFaceFamily + "; src: url('./resources/csstest-weights-200-kerned.ttf'); " + descriptorName + ": " + unexpectedMatch + "; }"; |
| |
| return Promise.all([ |
| load(fontFaceFamily, descriptorName, expectedMatch), |
| load(fontFaceFamily, descriptorName, unexpectedMatch) |
| ]); |
| } |
| |
| let familyId = 0; |
| |
| function testDescriptor(descriptorName, testCases) { |
| testCases.forEach(function (testCase) { |
| // Go though test cases, checking each descriptor has higher priority than next in the list |
| for(let i = 0; i < testCase.testDescriptors.length - 1; i++) { |
| let expectedMatch = testCase.testDescriptors[i]; |
| let unexpectedMatch = testCase.testDescriptors[i + 1]; |
| familyId += 1; |
| const family = "MatchTestFamily" + familyId; |
| |
| promise_test( |
| () => { |
| return createFontFaceRules(family, descriptorName, expectedMatch, unexpectedMatch) |
| .then(() => { |
| let testWeight = (descriptorName == "font-weight") ? testCase.value : "normal"; |
| let testStyle = (descriptorName == "font-style") ? testCase.value : "normal"; |
| let testStretch = (descriptorName == "font-stretch") ? testCase.value : "normal"; |
| |
| verifyFont(family, testWeight, testStyle, testStretch, "'W100'"); |
| }); |
| }, |
| "Matching " + descriptorName + ": '" + testCase.value + "' should prefer '" + expectedMatch + "' over '" + unexpectedMatch + "'"); |
| } |
| }); |
| } |
| |
| // Each case defines property value being tested and set of descriptor values in order of matching priority from highest to lowest |
| |
| testDescriptor("font-weight", [ |
| { value: "400", testDescriptors: ["400", "450 460", "500", "350 399", "351 398", "501 550", "502 560"] }, |
| { value: "430", testDescriptors: ["420 440", "450 460", "500", "400 425", "350 399", "340 398", "501 550", "502 560"] }, |
| { value: "500", testDescriptors: ["500", "450 460", "400", "350 399", "351 398", "501 550", "502 560"] }, |
| { value: "501", testDescriptors: ["501", "502 510", "503 520", "500", "450 460", "390 410", "300 350"] }, |
| { value: "399", testDescriptors: ["350 399", "340 360", "200 300", "400", "450 460", "500 501", "502 510"] } |
| ]); |
| |
| testDescriptor("font-stretch", [ |
| { value: "100%", testDescriptors: ["100%", "110% 120%", "115% 116%"] }, |
| { value: "110%", testDescriptors: ["110% 120%", "115% 116%", "105%", "100%", "50% 80%", "60% 70%"] }, |
| { value: "90%", testDescriptors: ["90% 100%", "50% 80%", "60% 70%", "110% 140%", "120% 130%"] }, |
| ]); |
| |
| testDescriptor("font-style", [ |
| { value: "normal", testDescriptors: ["normal", "oblique 0deg", "oblique 10deg 40deg", "oblique 20deg 30deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] }, |
| { value: "italic", testDescriptors: ["italic", "oblique 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 5deg 10deg", "oblique 5deg", "normal", "oblique 0deg", "oblique -60deg -30deg", "oblique -50deg -40deg" ] }, |
| { value: "oblique 20deg", testDescriptors: ["oblique 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 10deg", "italic", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] }, |
| { value: "oblique 21deg", testDescriptors: ["oblique 21deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 20deg", "oblique 10deg", "italic", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] }, |
| { value: "oblique 10deg", testDescriptors: ["oblique 10deg", "oblique 5deg", "oblique 15deg 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "italic", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] }, |
| { value: "oblique 0deg", testDescriptors: ["oblique 0deg", "oblique 5deg", "oblique 15deg 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "italic", "oblique -50deg -20deg", "oblique -40deg -30deg" ] }, |
| { value: "oblique -10deg", testDescriptors: ["oblique -10deg", "oblique -5deg", "oblique -1deg 0deg", "oblique -20deg -15deg", "oblique -60deg -30deg", "oblique -50deg -40deg", "italic", "oblique 0deg 10deg", "oblique 40deg 50deg" ] }, |
| { value: "oblique -20deg", testDescriptors: ["oblique -20deg", "oblique -60deg -40deg", "oblique -10deg", "italic", "oblique 0deg", "oblique 30deg 60deg", "oblique 40deg 50deg"] }, |
| { value: "oblique -21deg", testDescriptors: ["oblique -21deg", "oblique -60deg -40deg", "oblique -10deg", "italic", "oblique 0deg", "oblique 30deg 60deg", "oblique 40deg 50deg"] }, |
| ]); |
| |
| </script> |
| </body> |
| </html> |
