<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Element Timing: invisible images are not observable</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  #opacity0 {
    opacity: 0;
  }
  #visibilityHidden {
    visibility: hidden;
  }
  #displayNone {
    display: none;
  }
</style>
<script>
  async_test(function (t) {
    assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented");
    const observer = new PerformanceObserver(
      t.step_func_done((entries) => {
        // The image should not have caused an entry, so fail test.
        assert_unreached('Should not have received an entry! Received one with identifier '
            + entries.getEntries()[0].identifier);
      })
    );
    observer.observe({entryTypes: ['element']});
    // We add the images during onload to be sure that the observer is registered
    // in time for it to observe the element timing.
    window.onload = () => {
      const img = document.createElement('img');
      img.src = 'resources/square100.png';
      img.setAttribute('elementtiming', 'my_image');
      img.setAttribute('id', 'opacity0');
      document.body.appendChild(img);

      const img2 = document.createElement('img');
      img2.src = 'resources/square20.png';
      img2.setAttribute('elementtiming', 'my_image2');
      img2.setAttribute('id', 'visibilityHidden');
      document.body.appendChild(img2);

      const img3 = document.createElement('img');
      img3.src = 'resources/circle.svg';
      img3.setAttribute('elementtiming', 'my_image3');
      img3.setAttribute('id', 'displayNone');
      document.body.appendChild(img3);

      const div = document.createElement('div');
      div.setAttribute('id', 'opacity0');
      const img4 = document.createElement('img');
      img4.src = '/images/blue.png';
      img4.setAttribute('elementtiming', 'my_image4');
      div.appendChild(img4);
      document.body.appendChild(div);

      const div2 = document.createElement('div');
      div2.setAttribute('id', 'visibilityHidden');
      const img5 = document.createElement('img');
      img5.src = '/images/blue.png';
      img5.setAttribute('elementtiming', 'my_image5');
      div.appendChild(img5);
      document.body.appendChild(div2);

      const div3 = document.createElement('div');
      div3.setAttribute('id', 'displayNone');
      const img6 = document.createElement('img');
      img6.src = '/images/blue.png';
      img6.setAttribute('elementtiming', 'my_image6');
      div.appendChild(img6);
      document.body.appendChild(div3);
      // Images have been added but should not cause entries to be dispatched.
      // Wait for 500ms and end test, ensuring no entry was created.
      t.step_timeout(() => {
        t.done();
      }, 500);
    };
  }, 'Images with opacity: 0, visibility: hidden, or display: none are not observable.');
</script>