<!DOCTYPE html>
<meta charset="utf-8">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
    .macsystemfont {
    font-family: system-ui;
    }
</style>
<div id="testDivs"></div>
<script>
setup({
  explicit_done: true
});

test(function() {

    // SFNSText's trak table cutoff boundaries are as follow, let's measure width to
    // font size ratio at these font sizes.
    // We expect to observe a non linear increase in width, due to tracking.
    var trakTableFontSizes = [6.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0,
      16.0, 17.0, 20.0, 22.0, 28.0, 32.0, 36.0, 50.0, 64.0, 80.0, 100.0, 138.0 ];

    for (var i = 0; i < trakTableFontSizes.length; i++) {
      containerDiv = document.createElement('div');
      el = document.createElement('span');
      el.classList += "macsystemfont";
      el.style.fontSize = trakTableFontSizes[i] + "px";
      el.appendChild(document.createTextNode('YouWebTorrentVa'));
      containerDiv.appendChild(el);
      testDivs.appendChild(containerDiv);
    }

    // Width to font size ratios from Safari for ".SF NS Text". If the ratio
    // is not constant, this means letter spacing is not linearly changing
    // with font size, which means varying tracking is applied. At font sizes
    // above 78px, the tracking table ends and values become constant again.
    var expectedRatios = [11.873046875,
      11.443359375,
      11.306640625,
      11.189453125,
      11.072265625,
      10.955078125,
      10.857421875,
      10.759765625,
      10.681640625,
      10.61328125,
      10.159505208333334,
      10.110677083333334,
      10.052083333333334,
      10.032552083333334,
      10.013020833333334,
      9.934895833333334,
      9.856770833333334,
      9.798177083333334,
      9.798177083333334,
      9.798177083333334
    ];

    var theDivs = document.querySelectorAll(".macsystemfont");
    assert_equals(theDivs.length, expectedRatios.length);
    var kCssPixelsPerPoint = 96 / 72;
    for (var i = 0; i < theDivs.length; ++i) {
      var fontSize = parseFloat(getComputedStyle(theDivs[i])[
        'fontSize'], 10);
      var width = theDivs[i].getBoundingClientRect().width;
      var ptSize = fontSize / kCssPixelsPerPoint;
      var ratio = width / ptSize;
      var expectation = expectedRatios[i];
      assert_less_than(Math.abs(ratio - expectation), 0.01);
    }
    testDivs.style.display = "none";
  },
  "Font size to width ratio should match Safari and stay constant above 80px, according to the font's trak table."
);
done();
</script>