3 <title>Element Timing: observe elements with elementtiming attribute
</title>
10 <script src=
"/resources/testharness.js"></script>
11 <script src=
"/resources/testharnessreport.js"></script>
12 <script src=
"resources/element-timing-helpers.js"></script>
16 async_test(function (t
) {
17 if (!window
.PerformanceElementTiming
) {
18 assert_unreached("PerformanceElementTiming is not implemented");
20 const observer
= new PerformanceObserver(
21 t
.step_func_done(function(entryList
) {
22 assert_equals(entryList
.getEntries().length
, 1);
23 const entry
= entryList
.getEntries()[0];
24 const pathname
= window
.location
.origin
+ '/element-timing/resources/square100.png';
25 checkElement(entry
, pathname
, 'my_image', 'my_id', beforeRender
, img
);
26 // Assume viewport has size at least 100, so the element is fully visible.
27 checkRect(entry
, [0, 100, 0, 100]);
28 checkNaturalSize(entry
, 100, 100);
31 observer
.observe({entryTypes
: ['element']});
32 // We add the image during onload to be sure that the observer is registered
33 // in time for it to observe the element timing.
34 window
.onload
= () => {
35 // Add image of width equal to 100 and height equal to 100.
36 img
= document
.createElement('img');
37 img
.src
= 'resources/square100.png';
38 img
.setAttribute('elementtiming', 'my_image');
39 img
.setAttribute('id', 'my_id');
40 document
.body
.appendChild(img
);
41 beforeRender
= performance
.now();
43 }, 'Element with elementtiming attribute is observable.');