<!DOCTYPE html>

<head>
  <title>Performance Paint Timing Test: FCP due to canvas</title>
</head>

<body>
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <canvas id="canvas" width="200" height="200"></canvas>

  <script>
    setup({ "hide_test_state": true });
    async_test(function (t) {
      assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported.");
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("webgl2");
      if (!context) {
        assert_implements_optional(context, "WebGL 2 Canvas isn't supported.")
      }
      context.clearColor(0.3, 0.3, 0.3, 1);
      context.clear(context.COLOR_BUFFER_BIT);
      function testPaintEntries() {
        const bufferedEntries = performance.getEntriesByType('paint');
        if (bufferedEntries.length < 2) {
          t.step_timeout(function () {
            testPaintEntries();
          }, 20);
          return;
        }
        t.step(function () {
          assert_equals(bufferedEntries.length, 2, "There should be two paint timing instances.");
          assert_equals(bufferedEntries[0].entryType, "paint");
          assert_equals(bufferedEntries[0].name, "first-paint");
          assert_equals(bufferedEntries[1].entryType, "paint");
          assert_equals(bufferedEntries[1].name, "first-contentful-paint");
          t.done();
        });
      };
      t.step(function () {
        testPaintEntries();
      });
    }, "First contentful paint fires due to webgl2 canvas render.");
  </script>
</body>

</html>
