invisible-images.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /element-timing/invisible-images.html - WPT Dashboard Interop Dashboard

<!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>