Google Git
Sign in
chromium / external / w3c / web-platform-tests / e92918c7452f2ef99fe95545fdfb41a7787b9b94 / . / element-timing / images-repeated-resource.html
blob: e3fe9b90db111f7238bf242601eb1e19ced075de [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;
Nicolás Peña Moreno52759302019-07-23 20:18:10[diff] [blame]16 let loadTime1;
17 let loadTime2;
18 let renderTime1;
19 let renderTime2;
Nicolás Peña Moreno66bb6b42019-05-01 17:40:58[diff] [blame]20 let img;
21 let img2;
Nicolás Peña Moreno84bcab62019-03-06 17:00:47[diff] [blame]22 async_test(function (t) {
James Graham163424c2019-05-17 16:47:03[diff] [blame]23 if (!window.PerformanceElementTiming) {
24 assert_unreached("PerformanceElementTiming is not implemented");
25 }
Nicolás Peña Moreno84bcab62019-03-06 17:00:47[diff] [blame]26 const observer = new PerformanceObserver(
27 t.step_func(function(entryList) {
Nicolás Peña Moreno52759302019-07-23 20:18:10[diff] [blame]28 assert_equals(entryList.getEntries().length, 1);
29 const entry = entryList.getEntries()[0];
Nicolás Peña Morenoe42570f2019-10-21 21:23:09[diff] [blame]30 const pathname = window.location.origin + '/element-timing/resources/square100.png';
Nicolás Peña Moreno52759302019-07-23 20:18:10[diff] [blame]31 // Easier to check the |element| attribute here since element ID is the same for both images.
32 checkElement(entry, pathname, entry.identifier, 'image_id', beforeRender, null);
33 checkNaturalSize(entry, 100, 100);
34 if (entry.identifier === 'my_image') {
35 ++numEntries;
36 loadTime1 = entry.loadTime;
37 renderTime1 = entry.renderTime;
38 assert_equals(entry.element, img);
39
40 img2 = document.createElement('img');
41 img2.src = 'resources/square100.png';
42 img2.setAttribute('elementtiming', 'my_image2');
43 img2.setAttribute('id', 'image_id');
44 document.body.appendChild(img2);
45 beforeRender = performance.now();
46 }
47 else if (entry.identifier === 'my_image2') {
48 ++numEntries;
49 loadTime2 = entry.loadTime;
50 renderTime2 = entry.renderTime;
51 assert_equals(entry.element, img2);
52 }
Nicolás Peña Moreno84bcab62019-03-06 17:00:47[diff] [blame]53 if (numEntries == 2) {
Nicolás Peña Moreno52759302019-07-23 20:18:10[diff] [blame]54 assert_greater_than(loadTime2, loadTime1, 'Second image loads after first.');
55 assert_greater_than(renderTime2, renderTime1, 'Second image renders after first');
Nicolás Peña Moreno84bcab62019-03-06 17:00:47[diff] [blame]56 t.done();
57 }
58 })
59 );
60 observer.observe({entryTypes: ['element']});
61 // We add the images during onload to be sure that the observer is registered
62 // in time for it to observe the element timing.
63 window.onload = () => {
64 // Add image of width and height equal to 100.
Nicolás Peña Moreno66bb6b42019-05-01 17:40:58[diff] [blame]65 img = document.createElement('img');
Nicolás Peña Moreno84bcab62019-03-06 17:00:47[diff] [blame]66 img.src = 'resources/square100.png';
67 img.setAttribute('elementtiming', 'my_image');
Nicolás Peña Moreno15d28552019-04-01 19:03:08[diff] [blame]68 img.setAttribute('id', 'image_id');
Nicolás Peña Moreno84bcab62019-03-06 17:00:47[diff] [blame]69 document.body.appendChild(img);
Nicolás Peña Moreno84bcab62019-03-06 17:00:47[diff] [blame]70 beforeRender = performance.now();
71 };
Nicolás Peña Moreno52759302019-07-23 20:18:10[diff] [blame]72 }, 'Elements with elementtiming and same src are observable.');
Nicolás Peña Moreno84bcab62019-03-06 17:00:47[diff] [blame]73</script>
74
75</body>