layout/reftests/font-matching/descriptor-ranges.js

   1 /* Script used by descriptor-ranges.html and descriptor-ranges-ref.html
   2    to create @font-face rules and test elements for a collection of
   3    font-matching testcases. */
   4
   5 // To create unique font-family names for each testcase.
   6 let serial = 0;
   7
   8 // Accumulators for the lists of @font-face rules and test elements.
   9 let fontFaceRules = "";
  10 let testElements = "";
  11
  12 // Create a <div> element with the font properties to match. Its text reports
  13 // the property-value and corresponding pair of descriptors being tested.
  14 // (The associated createFontFaceRules() function is defined separately in the
  15 // test and reference files.)
  16 function createTestElement(family, weight, style, stretch, value, expected, unexpected) {
  17     return `<div style="font-family:${family}; font-weight:${weight}; font-style:${style}; font-stretch:${stretch};">` +
  18            `${family} ${value} (${expected} vs ${unexpected})</div>\n`;
  19 }
  20
  21 // Create testcases for the given descriptor.
  22 // Each testcase has a test property value, and a list of @font-face descriptors
  23 // to be matched against the property, where each descriptor in the list should
  24 // be preferred over the next.
  25 function testDescriptor(descriptorName, testCases) {
  26     testElements += `<div style="background:yellow;padding:0.5em">Tests of ${descriptorName} descriptor:</div>\n`;
  27     testCases.forEach(function (testCase) {
  28         // Go though test cases, checking each descriptor has higher priority than next in the list
  29         for (let i = 0; i < testCase.testDescriptors.length - 1; i++) {
  30             serial++;
  31             let expectedMatch   = testCase.testDescriptors[i];
  32             let unexpectedMatch = testCase.testDescriptors[i + 1];
  33             let familyName = "test_" + serial;
  34             fontFaceRules += createFontFaceRules(familyName, descriptorName, expectedMatch, unexpectedMatch);
  35             let testWeight  = (descriptorName == "font-weight")  ? testCase.value : "normal";
  36             let testStyle   = (descriptorName == "font-style")   ? testCase.value : "normal";
  37             let testStretch = (descriptorName == "font-stretch") ? testCase.value : "normal";
  38             testElements += createTestElement(familyName, testWeight, testStyle, testStretch,
  39                                               testCase.value, expectedMatch, unexpectedMatch);
  40         }
  41     });
  42 }
  43
  44 // Testcases (from web-platform/tests/css/css-fonts/variations/at-font-face-font-matching.html,
  45 // with a couple of extras). In each case, for the given property value, the testDescriptors
  46 // are listed from 'best' to 'worse' match, as evaluated by the font-matching algorithm in
  47 // https://drafts.csswg.org/css-fonts-4/#font-style-matching.
  48 testDescriptor("font-weight", [
  49     { value: "400", testDescriptors: ["400", "450 460", "500", "350 399", "351 398", "501 550", "502 560"] },
  50     { value: "430", testDescriptors: ["420 440", "450 460", "500", "400 425", "350 399", "340 398", "501 550", "502 560"] },
  51     { value: "500", testDescriptors: ["500", "450 460", "400", "350 399", "351 398", "501 550", "502 560"] },
  52     { value: "501", testDescriptors: ["501", "502 510", "503 520", "500", "450 460", "390 410", "300 350"] },
  53     { value: "399", testDescriptors: ["350 399", "340 360", "200 300", "400", "450 460", "500 501", "502 510"] },
  54     { value: "350", testDescriptors: ["200 300", "250 280", "420 450", "430 440", "445"] },
  55     { value: "550", testDescriptors: ["600 800", "700 900", "420 450", "430 440", "425"] }
  56 ]);
  57
  58 testDescriptor("font-stretch", [
  59     { value: "100%", testDescriptors: ["100%", "110% 120%", "115% 116%"] },
  60     { value: "110%", testDescriptors: ["110% 120%", "115% 116%", "105%", "100%", "50% 80%", "60% 70%"] },
  61     { value: "90%",  testDescriptors: ["90% 100%", "50% 80%", "60% 70%", "110% 140%", "120% 130%"] },
  62 ]);
  63
  64 testDescriptor("font-style", [
  65     { value: "normal",         testDescriptors: ["normal", "oblique 0deg", "oblique 10deg 40deg", "oblique 20deg 30deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
  66     { 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" ] },
  67     { value: "oblique 20deg",  testDescriptors: ["oblique 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 10deg", "italic", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
  68     { 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" ] },
  69     { 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" ] },
  70     { value: "oblique 0deg",   testDescriptors: ["oblique 0deg", "oblique 5deg", "oblique 15deg 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "italic", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
  71     { 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" ] },
  72     { value: "oblique -20deg", testDescriptors: ["oblique -20deg", "oblique -60deg -40deg", "oblique -10deg", "italic", "oblique 0deg", "oblique 30deg 60deg", "oblique 40deg 50deg"] },
  73     { value: "oblique -21deg", testDescriptors: ["oblique -21deg", "oblique -60deg -40deg", "oblique -10deg", "italic", "oblique 0deg", "oblique 30deg 60deg", "oblique 40deg 50deg"] },
  74 ]);
  75
  76 // Stuff the @font-face rules and test elements into the document.
  77 // Any testcases that render Ahem glyphs are failures.
  78 document.getElementById("dynamicStyles").innerHTML = fontFaceRules;
  79 document.getElementById("testContents").innerHTML = testElements;