testing/web-platform/tests/element-timing/invisible-images.html

   1 <!DOCTYPE HTML>
   2 <meta charset=utf-8>
   3 <title>Element Timing: invisible images are not observable</title>
   4 <script src="/resources/testharness.js"></script>
   5 <script src="/resources/testharnessreport.js"></script>
   6 <style>
   7   #opacity0 {
   8     opacity: 0;
   9   }
  10   #visibilityHidden {
  11     visibility: hidden;
  12   }
  13   #displayNone {
  14     display: none;
  15   }
  16 </style>
  17 <script>
  18   async_test(function (t) {
  19     assert_precondition(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented");
  20     const observer = new PerformanceObserver(
  21       t.step_func_done((entries) => {
  22         // The image should not have caused an entry, so fail test.
  23         assert_unreached('Should not have received an entry! Received one with identifier '
  24             + entries.getEntries()[0].identifier);
  25       })
  26     );
  27     observer.observe({entryTypes: ['element']});
  28     // We add the images during onload to be sure that the observer is registered
  29     // in time for it to observe the element timing.
  30     window.onload = () => {
  31       const img = document.createElement('img');
  32       img.src = 'resources/square100.png';
  33       img.setAttribute('elementtiming', 'my_image');
  34       img.setAttribute('id', 'opacity0');
  35       document.body.appendChild(img);
  36
  37       const img2 = document.createElement('img');
  38       img2.src = 'resources/square20.png';
  39       img2.setAttribute('elementtiming', 'my_image2');
  40       img2.setAttribute('id', 'visibilityHidden');
  41       document.body.appendChild(img2);
  42
  43       const img3 = document.createElement('img');
  44       img3.src = 'resources/circle.svg';
  45       img3.setAttribute('elementtiming', 'my_image3');
  46       img3.setAttribute('id', 'displayNone');
  47       document.body.appendChild(img3);
  48
  49       const div = document.createElement('div');
  50       div.setAttribute('id', 'opacity0');
  51       const img4 = document.createElement('img');
  52       img4.src = '/images/blue.png';
  53       img4.setAttribute('elementtiming', 'my_image4');
  54       div.appendChild(img4);
  55       document.body.appendChild(div);
  56
  57       const div2 = document.createElement('div');
  58       div2.setAttribute('id', 'visibilityHidden');
  59       const img5 = document.createElement('img');
  60       img5.src = '/images/blue.png';
  61       img5.setAttribute('elementtiming', 'my_image5');
  62       div.appendChild(img5);
  63       document.body.appendChild(div2);
  64
  65       const div3 = document.createElement('div');
  66       div3.setAttribute('id', 'displayNone');
  67       const img6 = document.createElement('img');
  68       img6.src = '/images/blue.png';
  69       img6.setAttribute('elementtiming', 'my_image6');
  70       div.appendChild(img6);
  71       document.body.appendChild(div3);
  72       // Images have been added but should not cause entries to be dispatched.
  73       // Wait for 500ms and end test, ensuring no entry was created.
  74       t.step_timeout(() => {
  75         t.done();
  76       }, 500);
  77     };
  78   }, 'Images with opacity: 0, visibility: hidden, or display: none are not observable.');
  79 </script>