<!DOCTYPE HTML> <meta charset=utf-8> <title>Element Timing: observe element with multiple background images</title> <body> <style> body { margin: 0; } #target { width: 200px; height: 200px; background-image: url('resources/circle.svg'), url('resources/square100.png'); } </style> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="resources/element-timing-helpers.js"></script> <script> let beforeRender = performance.now(); async_test(function (t) { assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); let numObservedElements = 0; let observedCircle = false; let observedSquare = false; const pathPrefix = window.location.origin + '/element-timing/resources/'; let div = document.getElementById('target'); const observer = new PerformanceObserver( t.step_func(entryList => { entryList.getEntries().forEach(entry => { numObservedElements++; if (entry.url.endsWith('square100.png')) { observedSquare = true; checkElement(entry, pathPrefix + 'square100.png', 'multi', 'target', beforeRender, div); checkRect(entry, [0, 200, 0, 200]); checkNaturalSize(entry, 100, 100); } else if (entry.url.endsWith('circle.svg')) { observedCircle = true; checkElement(entry, pathPrefix + 'circle.svg', 'multi', 'target', beforeRender, div); checkRect(entry, [0, 200, 0, 200]); checkNaturalSize(entry, 200, 200); } else { assert_unreached("Should not have observed an entry with different url!"); } if (numObservedElements === 2) { assert_true(observedCircle); assert_true(observedSquare); t.done(); } }); }) ); observer.observe({entryTypes: ['element']}); }, 'Element with two background images receives both.'); </script> <div id='target' elementtiming='multi'></div> </body>