Google Git
Sign in
chromium / external / w3c / web-platform-tests / 09143c197281e64651bad6e92a9397fd7eff084a / . / element-timing / images-repeated-resource.html
blob: 9bc8b5f45e4add4c384160d43649e13eebc1a563 [file] [log] [blame]
Nicolás Peña Moreno84bcab62019-03-06 17:00:47[diff] [blame]1<!DOCTYPE HTML>
2<meta charset=utf-8>
3<title>Element Timing: observe elements with the same resource</title>
4<body>
5<style>
6body {
7 margin: 0;
8}
9</style>
10<script src="/resources/testharness.js"></script>
11<script src="/resources/testharnessreport.js"></script>
12<script src="resources/element-timing-helpers.js"></script>
13<script>
14 let beforeRender;
15 let numEntries = 0;
16 let responseEnd1;
17 let responseEnd2;
Nicolás Peña Moreno66bb6b42019-05-01 17:40:58[diff] [blame]18 let img;
19 let img2;
Nicolás Peña Moreno84bcab62019-03-06 17:00:47[diff] [blame]20 const index = window.location.href.lastIndexOf('/');
21 const pathname = window.location.href.substring(0, index) +
22 '/resources/square100.png';
23 async_test(function (t) {
James Graham163424c2019-05-17 16:47:03[diff] [blame]24 if (!window.PerformanceElementTiming) {
25 assert_unreached("PerformanceElementTiming is not implemented");
26 }
Nicolás Peña Moreno84bcab62019-03-06 17:00:47[diff] [blame]27 const observer = new PerformanceObserver(
28 t.step_func(function(entryList) {
29 entryList.getEntries().forEach(entry => {
Nicolás Peña Moreno66bb6b42019-05-01 17:40:58[diff] [blame]30 // Easier to check the |element| attribute here since element ID is the same for both images.
31 checkElement(entry, pathname, entry.identifier, 'image_id', beforeRender, null);
Nicolás Peña Morenocf8e8812019-04-01 17:12:02[diff] [blame]32 checkNaturalSize(entry, 100, 100);
Nicolás Peña Moreno84bcab62019-03-06 17:00:47[diff] [blame]33 if (entry.identifier === 'my_image') {
34 ++numEntries;
35 responseEnd1 = entry.responseEnd;
Nicolás Peña Moreno66bb6b42019-05-01 17:40:58[diff] [blame]36 assert_equals(entry.element, img);
Nicolás Peña Moreno84bcab62019-03-06 17:00:47[diff] [blame]37 }
38 else if (entry.identifier === 'my_image2') {
39 ++numEntries;
40 responseEnd2 = entry.responseEnd;
Nicolás Peña Moreno66bb6b42019-05-01 17:40:58[diff] [blame]41 assert_equals(entry.element, img2);
Nicolás Peña Moreno84bcab62019-03-06 17:00:47[diff] [blame]42 }
43 });
44 if (numEntries == 2) {
45 assert_equals(responseEnd1, responseEnd2);
46 t.done();
47 }
48 })
49 );
50 observer.observe({entryTypes: ['element']});
51 // We add the images during onload to be sure that the observer is registered
52 // in time for it to observe the element timing.
53 window.onload = () => {
54 // Add image of width and height equal to 100.
Nicolás Peña Moreno66bb6b42019-05-01 17:40:58[diff] [blame]55 img = document.createElement('img');
Nicolás Peña Moreno84bcab62019-03-06 17:00:47[diff] [blame]56 img.src = 'resources/square100.png';
57 img.setAttribute('elementtiming', 'my_image');
Nicolás Peña Moreno15d28552019-04-01 19:03:08[diff] [blame]58 img.setAttribute('id', 'image_id');
Nicolás Peña Moreno84bcab62019-03-06 17:00:47[diff] [blame]59 document.body.appendChild(img);
60
Nicolás Peña Moreno66bb6b42019-05-01 17:40:58[diff] [blame]61 img2 = document.createElement('img');
Nicolás Peña Moreno84bcab62019-03-06 17:00:47[diff] [blame]62 img2.src = 'resources/square100.png';
63 img2.setAttribute('elementtiming', 'my_image2');
Nicolás Peña Moreno15d28552019-04-01 19:03:08[diff] [blame]64 img2.setAttribute('id', 'image_id');
Nicolás Peña Moreno84bcab62019-03-06 17:00:47[diff] [blame]65 document.body.appendChild(img2);
66
67 beforeRender = performance.now();
68 };
69 }, 'Element with elementtiming attribute is observable.');
70</script>
71
72</body>