<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Generic font family: -webkit-* treated as &lt;font-family&gt;</title>
    <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#generic-font-families">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <script src="/css/css-fonts/support/font-family-keywords.js"></script>
    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
    <style>
      div {
        font-size: 10px;
      }
      #ahem {
        font-family: Ahem;
      }
    </style>
  </head>
  <body>
    <div><span id="ahem">00000</span></div>
    <div><span id="test">00000</span></div>
  </body>
<script>
  setup({ explicit_done: true });
  window.addEventListener("load", () => { document.fonts.ready.then(runTests); });
  function SetFontFamilyAndMeasure(fontFamilyValue) {
    var element = document.getElementById('test');
    element.setAttribute("style", `font-family: ${fontFamilyValue}, Ahem;`);
    return element.offsetWidth;
  }
  function runTests() {
    let ahem = document.getElementById('ahem');
    let ahem_expected_width = ahem.offsetWidth;
    let families = kGenericFontFamilyKeywords.map(keyword => `-webkit-${keyword}`).concat(kWebKitPrefixKeywords);
    families.forEach(name => {
      test(function() {
      assert_equals(SetFontFamilyAndMeasure(name), ahem_expected_width);
      }, `font-family: ${name} treated as <font-family>, not <generic-name>`);
    });
    done();
  }
</script>
</html>