<!DOCTYPE html>
<html>
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script src=/fetch/sec-metadata/resources/helper.js></script>
<body>
  <div id="test1">1</div>
  <div id="test2">2</div>
  <div id="test3">3</div>
  <!-- Same-Origin request -->
  <style>
    @font-face {
      font-family: myFirstFont;
      src: url(https://{{host}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=font-same-origin);
    }
    #test1 {
      font-family: myFirstFont;
    }
  </style>

  <!-- Same-Site request -->
  <style>
    @font-face {
      font-family: mySecondFont;
      src: url(https://{{hosts[][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=font-same-site);
    }
    #test2 {
      font-family: mySecondFont;
    }
  </style>

  <!-- Cross-Site request -->
  <style>
    @font-face {
      font-family: myThirdFont;
      src: url(https://{{hosts[alt][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=font-cross-site);
    }
    #test3 {
      font-family: myThirdFont;
    }
  </style>
</body>
<script>
  document.fonts.ready.then(function () {
    promise_test(t => {
      return new Promise((resolve, reject) => {
        let key = "font-same-origin";
        let expected = {"destination":"font", "site":"same-origin"};
        fetch("/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key)
          .then(response => response.text())
          .then(text => assert_header_equals(text, expected))
          .then(_ => resolve())
          .catch(e => reject(e));
        });
    }, "Same-Origin font");

    promise_test(t => {
      return new Promise((resolve, reject) => {
        let key = "font-same-site";
        let expected = {"destination":"font", "site":"same-site"};
        fetch("/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key)
          .then(response => response.text())
          .then(text => assert_header_equals(text, expected))
          .then(_ => resolve())
          .catch(e => reject(e));
        });
    }, "Same-Site font");

    promise_test(t => {
      return new Promise((resolve, reject) => {
        let key = "font-cross-site";
        let expected = {"destination":"font", "site":"cross-site"};
        fetch("/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key)
          .then(response => response.text())
          .then(text => assert_header_equals(text, expected))
          .then(_ => resolve())
          .catch(e => reject(e));
        });
    }, "Cross-Site font");

  });
</script>
</html>