diff options
Diffstat (limited to 'testing/web-platform/tests/element-timing')
62 files changed, 2405 insertions, 0 deletions
diff --git a/testing/web-platform/tests/element-timing/META.yml b/testing/web-platform/tests/element-timing/META.yml new file mode 100644 index 0000000000..15510df7e5 --- /dev/null +++ b/testing/web-platform/tests/element-timing/META.yml @@ -0,0 +1,3 @@ +spec: https://wicg.github.io/element-timing/ +suggested_reviewers: + - npm1 diff --git a/testing/web-platform/tests/element-timing/background-image-data-uri.html b/testing/web-platform/tests/element-timing/background-image-data-uri.html new file mode 100644 index 0000000000..9722463742 --- /dev/null +++ b/testing/web-platform/tests/element-timing/background-image-data-uri.html @@ -0,0 +1,39 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe element with inline background image</title> +<body> +<style> +body { + margin: 0; +} +#target { + width: 100px; + height: 50px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEX/AAD///9BHTQRAAAAAWJLR0QB/wIt3gAAAAtJREFUCNdjYMAHAAAeAAFuhUcyAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE5LTA0LTA1VDIwOjA4OjQxKzAyOjAwPa6EZwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOS0wNC0wNVQyMDowODo0MSswMjowMEzzPNsAAAAASUVORK5CYII=); +} +</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"); + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + // Only the first characters of the data URI are included in the entry. + const uriPrefix = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA'; + checkElementWithoutResourceTiming(entry, uriPrefix, 'my_div', 'target', + beforeRender, document.getElementById('target')); + // The background image is a red square of length 10. + checkRect(entry, [0, 100, 0, 50]); + checkNaturalSize(entry, 10, 10); + }) + ); + observer.observe({entryTypes: ['element']}); + }, 'Element with elementtiming attribute and inline background image is observable.'); +</script> +<div id='target' elementtiming='my_div'></div> +</body> diff --git a/testing/web-platform/tests/element-timing/background-image-multiple-elements.html b/testing/web-platform/tests/element-timing/background-image-multiple-elements.html new file mode 100644 index 0000000000..d4998b47ff --- /dev/null +++ b/testing/web-platform/tests/element-timing/background-image-multiple-elements.html @@ -0,0 +1,88 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: background image affecting multiple elements</title> +<body> +<style> +body { + margin: 0; +} +.my_div { + background-image: url('resources/square100.png'); +} +#div1 { + width: 100px; + height: 100px; +} +#div2 { + width: 200px; + height: 100px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> + async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + let beforeRender = performance.now(); + let numObservedElements = 0; + let observedDiv1 = false; + let observedDiv2Img = false; + let observedDiv2Txt = false; + const pathname = window.location.origin + '/element-timing/resources/square100.png'; + const observer = new PerformanceObserver( + t.step_func(function(entryList) { + entryList.getEntries().forEach(entry => { + numObservedElements++; + if (entry.id == 'div1') { + observedDiv1 = true; + checkElement(entry, pathname, 'et1', 'div1', beforeRender, + document.getElementById('div1')); + // Div is in the top left corner. + checkRect(entry, [0, 100, 0, 100]); + checkNaturalSize(entry, 100, 100); + } + else if (entry.id == 'div2') { + // Check image entry. + if (entry.name !== 'text-paint') { + observedDiv2Img = true; + checkElement(entry, pathname, 'et2', 'div2', beforeRender, + document.getElementById('div2')); + // Div is below div1, on the left. + checkRect(entry, [0, 200, 100, 200]); + checkNaturalSize(entry, 100, 100); + } + // Check the text entry. + else { + observedDiv2Txt = true; + checkTextElement(entry, 'et2', 'div2', beforeRender, + document.getElementById('div2')); + assert_greater_than_equal(entry.intersectionRect.right - entry.intersectionRect.left, 50); + assert_greater_than_equal(entry.intersectionRect.bottom - entry.intersectionRect.top, 10); + } + } + else { + assert_unreached("Should not observe other elements!"); + } + if (numObservedElements === 3) { + assert_true(observedDiv1); + assert_true(observedDiv2Img); + assert_true(observedDiv2Txt); + t.done(); + } + }); + }) + ); + observer.observe({entryTypes: ['element']}); + }, 'Background image affecting various elements is observed.'); +</script> +<div id="div1" class="my_div" elementtiming="et1"> + <img width=50 height=50 src='resources/circle.svg'/> +</div> +<div width=200 height=100 id="div2" class="my_div" elementtiming="et2"> + Sample text inside div. +</div> +<div id="div3"> + I am a div that should not be observed! +</div> +</body> diff --git a/testing/web-platform/tests/element-timing/background-image-stretched.html b/testing/web-platform/tests/element-timing/background-image-stretched.html new file mode 100644 index 0000000000..3ad8976ccf --- /dev/null +++ b/testing/web-platform/tests/element-timing/background-image-stretched.html @@ -0,0 +1,39 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe larger element with stretched background image</title> +<body> +<style> +body { + margin: 0; +} +#target { + width: 200px; + height: 150px; + background-image: 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"); + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + const pathname = window.location.origin + '/element-timing/resources/square100.png'; + checkElement(entry, pathname, 'my_div', 'target', beforeRender, + document.getElementById('target')); + // The background image extends to occupy to full size of the div. + checkRect(entry, [0, 200, 0, 150]); + // The natural size of the square remains unchanged. + checkNaturalSize(entry, 100, 100); + }) + ); + observer.observe({entryTypes: ['element']}); + }, 'Element with background image shows correct image size.'); +</script> +<div id='target' elementtiming='my_div'></div> +</body> diff --git a/testing/web-platform/tests/element-timing/buffer-before-onload.html b/testing/web-platform/tests/element-timing/buffer-before-onload.html new file mode 100644 index 0000000000..17c8238f6e --- /dev/null +++ b/testing/web-platform/tests/element-timing/buffer-before-onload.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<meta charset=utf-8 /> +<title>Element Timing: buffer elements before onload</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src="resources/element-timing-helpers.js"></script> +<body> +<img src=resources/slow-image.py?name=square20.png&sleep=500> +<script> + /* + In this test, a slow image is added to the frame to delay onload. The entry + is available from the observer with the buffered flag set to true. + */ + async_test(function(t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + beforeRender = performance.now(); + const img = document.createElement('img'); + img.src = 'resources/square20.jpg'; + img.setAttribute('elementtiming', 'my_image'); + img.setAttribute('id', 'my_id'); + document.body.appendChild(img); + + // this PerformanceObserver should be notified about the previously + // buffered element entry + new PerformanceObserver(t.step_func((entryList, observer) => { + assert_equals(entryList.getEntries().length, 1); + entryList.getEntries().forEach(entry => { + assert_equals(entry.entryType, "element"); + const pathname = window.location.origin + '/element-timing/resources/square20.jpg'; + checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img); + checkNaturalSize(entry, 20, 20); + observer.disconnect(); + t.done(); + }); + })).observe({ + type: "element", + buffered: true + }); + }, "Element Timing: image loads before onload available from buffered flag."); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/element-timing/buffered-flag.html b/testing/web-platform/tests/element-timing/buffered-flag.html new file mode 100644 index 0000000000..e7fcf059fb --- /dev/null +++ b/testing/web-platform/tests/element-timing/buffered-flag.html @@ -0,0 +1,40 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe element with buffered flag</title> +<body> +<style> +body { + margin: 0; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> + async_test(t => { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const beforeRender = performance.now(); + const img = document.createElement('img'); + // Initial observer used to know when entry has been dispatched + new PerformanceObserver(() => { + // Second observer should require buffered flag to receive the already-dispatched entry. + new PerformanceObserver(t.step_func_done(entryList => { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + const pathname = window.location.origin + '/images/black-rectangle.png'; + checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, document.getElementById('my_id')); + // Test that viewport size is at least 100, so element is fully visible. + assert_greater_than_equal(document.documentElement.clientWidth, 100, 'Width should be >= 100'); + assert_greater_than_equal(document.documentElement.clientHeight, 100, 'Height should be >= 100'); + + checkRect(entry, [0, 100, 0, 50]); + checkNaturalSize(entry, 100, 50); + })).observe({type: 'element', buffered: true}); + }).observe({type: 'element'}); + img.src = '/images/black-rectangle.png'; + img.setAttribute('elementtiming', 'my_image'); + img.setAttribute('id', 'my_id'); + document.body.appendChild(img); + }, 'Element Timing entries are observable via buffered flag.'); +</script> +</body> diff --git a/testing/web-platform/tests/element-timing/cross-origin-element.sub.html b/testing/web-platform/tests/element-timing/cross-origin-element.sub.html new file mode 100644 index 0000000000..1052bf246d --- /dev/null +++ b/testing/web-platform/tests/element-timing/cross-origin-element.sub.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe cross-origin images but without renderTime</title> +<body> +<style> +body { + margin: 0; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> + async_test((t) => { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + let img; + const pathname = 'http://{{domains[www]}}:{{ports[http][1]}}' + + '/element-timing/resources/square100.png'; + const observer = new PerformanceObserver( + t.step_func_done((entryList) => { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + checkElement(entry, pathname, 'my_image', 'the_id', 0, img); + assert_equals(entry.renderTime, 0, + 'The renderTime of a cross-origin image should be 0.'); + checkRect(entry, [0, 100, 0, 100]); + checkNaturalSize(entry, 100, 100); + }) + ); + observer.observe({entryTypes: ['element']}); + // We add the image during onload to be sure that the observer is registered + // in time for it to observe the element timing. + // TODO(npm): change observer to use buffered flag. + window.onload = t.step_func(() => { + // Add a cross origin image resource. + img = document.createElement('img'); + img.src = pathname; + img.setAttribute('elementtiming', 'my_image'); + img.setAttribute('id', 'the_id'); + document.body.appendChild(img); + }); + }, 'Cross-origin image element is NOT observable.'); +</script> + +</body> diff --git a/testing/web-platform/tests/element-timing/cross-origin-iframe-element.sub.html b/testing/web-platform/tests/element-timing/cross-origin-iframe-element.sub.html new file mode 100644 index 0000000000..2f49933ab9 --- /dev/null +++ b/testing/web-platform/tests/element-timing/cross-origin-iframe-element.sub.html @@ -0,0 +1,36 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: do NOT observe elements from cross-origin iframes</title> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> + async_test((t) => { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func_done((entryList) => { + assert_unreached("We should not observe a cross origin element."); + }) + ); + observer.observe({entryTypes: ['element']}); + // We add the iframe during onload to be sure that the observer is registered + // in time for it to observe the element timing. + // TODO(npm): change observer to use buffered flag. + window.onload = t.step_func(() => { + // Add a cross origin iframe with an image. + const iframe = document.createElement('iframe'); + iframe.src = 'http://{{domains[www]}}:{{ports[http][1]}}' + + '/element-timing/resources/iframe-with-square.html'; + document.body.appendChild(iframe); + iframe.onload = t.step_func(() => { + t.step_timeout( () => { + // After some wait, assume observer did not receive the entry, so the test passes. + t.done(); + }, 100); + }); + }); + }, 'Element from cross origin iframe is NOT observable.'); +</script> + +</body> diff --git a/testing/web-platform/tests/element-timing/css-generated-text.html b/testing/web-platform/tests/element-timing/css-generated-text.html new file mode 100644 index 0000000000..d1bbf5a7ee --- /dev/null +++ b/testing/web-platform/tests/element-timing/css-generated-text.html @@ -0,0 +1,36 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe generated CSS text</title> +<style> +p::before { + content: "Generated text prefix"; +} +body { + margin: 20px; +} +</style> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<p elementtiming='my_text' id='text_id'></p> +<script> + async_test(function (t) { + const beforeRender = performance.now(); + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + checkTextElement(entry, 'my_text', 'text_id', beforeRender, document.getElementById('text_id')); + assert_equals(entry.intersectionRect.left, 20, 'left should be 20.'); + assert_equals(entry.intersectionRect.top, 20, 'top should be 20.'); + // Try a lower bound of height=10, width=80 for the generated text. + assert_greater_than_equal(entry.intersectionRect.right, 100); + assert_greater_than_equal(entry.intersectionRect.bottom, 30); + }) + ); + observer.observe({type: 'element', buffered: true}); + }, 'Generated text content is observable.'); +</script> +</body> diff --git a/testing/web-platform/tests/element-timing/disconnect-image.html b/testing/web-platform/tests/element-timing/disconnect-image.html new file mode 100644 index 0000000000..6f9f2ce7b9 --- /dev/null +++ b/testing/web-platform/tests/element-timing/disconnect-image.html @@ -0,0 +1,41 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: element attribute returns null when element is disconnected</title> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> + let beforeRender; + let img; + async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + const pathname = window.location.origin + '/element-timing/resources/square100.png'; + // This method will check that entry.element is |img|. + checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img); + + img.parentNode.removeChild(img); + // After removing image, entry.element should return null. + assert_equals(entry.element, null); + }) + ); + observer.observe({entryTypes: ['element']}); + // We add the image during onload to be sure that the observer is registered + // in time for it to observe the element timing. + window.onload = () => { + // Add image of width equal to 100 and height equal to 100. + img = document.createElement('img'); + img.src = 'resources/square100.png'; + img.setAttribute('elementtiming', 'my_image'); + img.setAttribute('id', 'my_id'); + document.body.appendChild(img); + beforeRender = performance.now(); + }; + }, 'Disconnected elements have null as their |element| attribute.'); +</script> + +</body> diff --git a/testing/web-platform/tests/element-timing/element-only-when-fully-active.html b/testing/web-platform/tests/element-timing/element-only-when-fully-active.html new file mode 100644 index 0000000000..ff08074d57 --- /dev/null +++ b/testing/web-platform/tests/element-timing/element-only-when-fully-active.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>ElementTiming: element is only exposed for fully active documents.</title> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<iframe src="resources/iframe-stores-entry.html" id="ifr"></iframe> +<script> + let t = async_test('Only expose element attribute for fully active documents'); + t.step(() => { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + }); + window.triggerTest = t.step_func_done(elementEntry => { + assert_not_equals(elementEntry.element, null); + const iframe = document.getElementById('ifr'); + iframe.remove(); + assert_equals(elementEntry.element, null); + }); +</script> +</body> diff --git a/testing/web-platform/tests/element-timing/first-letter-background.html b/testing/web-platform/tests/element-timing/first-letter-background.html new file mode 100644 index 0000000000..f05f2f9223 --- /dev/null +++ b/testing/web-platform/tests/element-timing/first-letter-background.html @@ -0,0 +1,57 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe element with background image in its first letter</title> +<body> +<style> +#target::first-letter { + background-image: url('/images/black-rectangle.png'); +} +#target { + font-size: 12px; +} +</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"); + const div = document.getElementById('target'); + let textObserved = false; + let imageObserved = false; + function calculateSize(entry) { + const ir = entry.intersectionRect; + return (ir.right - ir.left) * (ir.bottom - ir.top); + } + const observer = new PerformanceObserver( + t.step_func(function(entryList) { + entryList.getEntries().forEach(entry => { + if (entry.name === 'text-paint') { + checkTextElement(entry, 'my_div', 'target', beforeRender, div); + textObserved = true; + const size = calculateSize(entry); + // Assume average width is between 4px and 15px. + // Therefore, text size must be between 12 * (35*4) and 12 * (35*15). + assert_between_inclusive(size, 1680, 6300); + } + else { + assert_equals(entry.name, 'image-paint'); + const pathname = window.location.origin + '/images/black-rectangle.png'; + checkElement(entry, pathname, 'my_div', 'target', beforeRender, div); + checkNaturalSize(entry, 100, 50); + imageObserved = true; + const size = calculateSize(entry); + // Background image size should only be approximately the size of a single letter. + assert_between_inclusive(size, 48, 180); + } + }); + if (textObserved && imageObserved) + t.done(); + }) + ); + observer.observe({entryTypes: ['element']}); + }, 'Element with elementtiming attribute and background image in first-letter is observable.'); +</script> +<div id='target' elementtiming='my_div'>This is some text that I care about</div> +</body> diff --git a/testing/web-platform/tests/element-timing/fixed-id-identifier.html b/testing/web-platform/tests/element-timing/fixed-id-identifier.html new file mode 100644 index 0000000000..749b9ada2f --- /dev/null +++ b/testing/web-platform/tests/element-timing/fixed-id-identifier.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: entry does not change its id or identifier value</title> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<p elementtiming='my_identifier' id='my_id'>Text</p> +<script> + async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + assert_equals(entry.id, 'my_id'); + assert_equals(entry.identifier, 'my_identifier'); + const element = document.getElementById('my_id'); + element.id = 'other_id'; + element.setAttribute('elementtiming', 'other_identifier'); + assert_equals(entry.id, 'my_id'); + assert_equals(entry.identifier, 'my_identifier'); + }) + ); + observer.observe({type: 'element', buffered: true}); + }, 'PerformanceElementTiming id and identifier do not change when Element changes.'); +</script> +</body> diff --git a/testing/web-platform/tests/element-timing/idlharness.window.js b/testing/web-platform/tests/element-timing/idlharness.window.js new file mode 100644 index 0000000000..a3189c3679 --- /dev/null +++ b/testing/web-platform/tests/element-timing/idlharness.window.js @@ -0,0 +1,17 @@ +// META: script=/resources/WebIDLParser.js +// META: script=/resources/idlharness.js +// META: timeout=long + +// https://wicg.github.io/element-timing/ + +'use strict'; + +idl_test( + ['element-timing'], + ['performance-timeline', 'dom'], + idl_array => { + idl_array.add_objects({ + // PerformanceElementTiming: [ TODO ] + }); + } +); diff --git a/testing/web-platform/tests/element-timing/image-TAO.sub.html b/testing/web-platform/tests/element-timing/image-TAO.sub.html new file mode 100644 index 0000000000..7b455dfa4c --- /dev/null +++ b/testing/web-platform/tests/element-timing/image-TAO.sub.html @@ -0,0 +1,54 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe cross origin images with various Timing-Allow-Origin headers</title> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> + async_test(t => { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const beforeRender = performance.now(); + const remote_img = 'http://{{domains[www]}}:{{ports[http][1]}}/element-timing/resources/TAOImage.py?' + + 'origin=' + window.location.origin +'&tao='; + const valid_tao = ['wildcard', 'origin', 'multi', 'multi_wildcard', 'match_origin', 'match_wildcard']; + function addImage(tao) { + const img = document.createElement('img'); + img.src = remote_img + tao; + img.setAttribute('elementtiming', tao); + img.id = 'id_' + tao; + document.body.appendChild(img); + } + valid_tao.forEach(tao => { + addImage(tao); + }); + const invalid_tao = ['null', 'space', 'uppercase']; + invalid_tao.forEach(tao => { + addImage(tao); + }); + let img_count = 0; + const total_images = valid_tao.length + invalid_tao.length; + new PerformanceObserver( + t.step_func(entryList => { + entryList.getEntries().forEach(entry => { + img_count++; + const tao = entry.identifier; + const img = document.getElementById('id_' + tao); + if (valid_tao.includes(tao)) { + checkElement(entry, remote_img + tao, tao, 'id_' + tao, beforeRender, img); + } else if (invalid_tao.includes(tao)) { + assert_equals(entry.renderTime, 0, 'Entry with tao=' + tao + ' must have a renderTime of 0'); + checkElement(entry, remote_img + tao, tao, 'id_' + tao, 0, img); + } + else { + assert_unreached('Should be in one of valid_tao OR invalid_tao'); + } + checkNaturalSize(entry, 100, 100); + if (img_count == total_images) + t.done(); + }); + }) + ).observe({type: 'element', buffered: true}); + }, 'Cross-origin elements with valid TAO have correct renderTime, with invalid TAO have renderTime set to 0.'); +</script> +</body> diff --git a/testing/web-platform/tests/element-timing/image-carousel.html b/testing/web-platform/tests/element-timing/image-carousel.html new file mode 100644 index 0000000000..2b3b618f8c --- /dev/null +++ b/testing/web-platform/tests/element-timing/image-carousel.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Element Timing: observe images in carousel</title> +<style> +body { + margin: 0; +} +/* Do not display images by default */ +.carousel-image { + display: none; +} +</style> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> + +<div class="slideshow-container"> + <div class='carousel-image'> + <img src="resources/circle.svg" elementtiming='image0' id='image0'> + </div> + <div class='carousel-image'> + <img src="resources/square100.png" elementtiming='image1' id='image1'> + </div> +</div> + +<script> + async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const beforeRenderTimes = []; + let entry_count = 0; + const entry_count_per_element = [0, 0]; + const pathname0 = window.location.origin + '/element-timing/resources/circle.svg'; + const pathname1 = window.location.origin + '/element-timing/resources/square100.png'; + const observer = new PerformanceObserver(t.step_func(list => { + list.getEntries().forEach(entry => { + if (entry_count % 2 == 0) { + checkElement(entry, pathname0, 'image0', 'image0', beforeRenderTimes[entry_count], + document.getElementById('image0')); + checkRect(entry, [0, 200, 0, 200]); + checkNaturalSize(entry, 200, 200); + entry_count_per_element[0]++; + } + else { + checkElement(entry, pathname1, 'image1', 'image1', beforeRenderTimes[entry_count], + document.getElementById('image1')); + checkRect(entry, [0, 100, 0, 100]); + checkNaturalSize(entry, 100, 100); + entry_count_per_element[1]++; + } + entry_count++; + // Check each image twice before ending the test. + if (entry_count == 4) { + assert_equals(entry_count_per_element[0], 2); + assert_equals(entry_count_per_element[1], 2); + t.done(); + } + }) + })); + observer.observe({entryTypes: ['element']}); + let slideIndex = 0; + showCarousel(); + + function showCarousel() { + beforeRenderTimes.push(performance.now()); + const slides = document.getElementsByClassName("carousel-image"); + slides[slideIndex].style.display = "block"; + slides[1 - slideIndex].style.display = "none"; + slideIndex = 1 - slideIndex; + t.step_timeout(showCarousel, 50); // Change image every 50 ms. + } + }, 'Entries for elements within an image carousel are dispatched when the elements are redrawn.'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/element-timing/image-clipped-svg.html b/testing/web-platform/tests/element-timing/image-clipped-svg.html new file mode 100644 index 0000000000..4c2bb36079 --- /dev/null +++ b/testing/web-platform/tests/element-timing/image-clipped-svg.html @@ -0,0 +1,34 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe image inside SVG with small dimensions</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> +let beforeRender; +async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + const pathname = window.location.origin + '/element-timing/resources/circle.svg'; + checkElement(entry, pathname, 'my_svg', 'SVG', beforeRender, + document.getElementById('SVG')); + // Image size is 200x200 but SVG size is 100x100 so it is clipped. + checkRect(entry, [0, 100, 0, 100]); + checkNaturalSize(entry, 200, 200); + }) + ); + observer.observe({entryTypes: ['element']}); + beforeRender = performance.now(); +}, "Able to observe svg image."); +</script> +<style> +body { + margin: 0; +} +</style> +<svg width="100" height="100"> + <image href='resources/circle.svg' elementtiming='my_svg' id='SVG'/> +</svg> diff --git a/testing/web-platform/tests/element-timing/image-data-uri.html b/testing/web-platform/tests/element-timing/image-data-uri.html new file mode 100644 index 0000000000..02d88fb244 --- /dev/null +++ b/testing/web-platform/tests/element-timing/image-data-uri.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe inline image</title> +<body> +<style> +body { + margin: 0; +} +#inline_wee { + display: block; +} +</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"); + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + // Only the first characters of the data URI are included in the entry. + const uriPrefix = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA'; + checkElementWithoutResourceTiming(entry, uriPrefix, 'my_img', 'inline_wee', + beforeRender, document.getElementById('inline_wee')); + // The image is a red square of length 10. + checkRect(entry, [0, 10, 0, 10]); + checkNaturalSize(entry, 10, 10); + }) + ); + observer.observe({entryTypes: ['element']}); + }, 'Inline image is observable via Element Timing.'); +</script> +<img elementtiming='my_img' id='inline_wee' src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEX/AAD///9BHTQRAAAAAWJLR0QB/wIt3gAAAAtJREFUCNdjYMAHAAAeAAFuhUcyAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE5LTA0LTA1VDIwOjA4OjQxKzAyOjAwPa6EZwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOS0wNC0wNVQyMDowODo0MSswMjowMEzzPNsAAAAASUVORK5CYII="/> +</body> diff --git a/testing/web-platform/tests/element-timing/image-not-added.html b/testing/web-platform/tests/element-timing/image-not-added.html new file mode 100644 index 0000000000..d77049ecd4 --- /dev/null +++ b/testing/web-platform/tests/element-timing/image-not-added.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: do not observe a disconnected image</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func_done(() => { + // The image should not have caused an entry, so fail test. + assert_unreached('Should not have received an entry!'); + }) + ); + observer.observe({entryTypes: ['element']}); + // We add the image during onload to be sure that the observer is registered + // in time for it to observe the element timing. + window.onload = () => { + // Add image of width equal to 100 and height equal to 100. + const img = document.createElement('img'); + img.src = 'resources/square100.png'; + img.setAttribute('elementtiming', 'my_image'); + img.setAttribute('id', 'my_id'); + // Image has been created but not added. + // Wait for 500ms and end test, ensuring no entry was created. + t.step_timeout(() => { + t.done(); + }, 500); + }; + }, 'Image which is not added to DOM tree is not observable.'); +</script> diff --git a/testing/web-platform/tests/element-timing/image-not-fully-visible.html b/testing/web-platform/tests/element-timing/image-not-fully-visible.html new file mode 100644 index 0000000000..504d17592f --- /dev/null +++ b/testing/web-platform/tests/element-timing/image-not-fully-visible.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: intersectionRect when image overflows</title> +<body> +<style> +body { + margin: 200px 100px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> + let beforeRender; + let img; + async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + const pathname = window.location.origin + '/element-timing/resources/square20.png'; + checkElement(entry, pathname, 'not_fully_visible', '', beforeRender, img); + // Image will not be fully visible. It should start from the top left part + // of the document, excluding the margin, and then overflow. + checkRect(entry, + [100, document.documentElement.clientWidth, 200, document.documentElement.clientHeight]); + checkNaturalSize(entry, 20, 20); + }) + ); + observer.observe({entryTypes: ['element']}); + // We add the image during onload to be sure that the observer is registered + // in time for it to observe the element timing. + window.onload = () => { + // Add an image setting width and height equal to viewport. + img = document.createElement('img'); + img.src = 'resources/square20.png'; + img.setAttribute('elementtiming', 'not_fully_visible'); + img.width = document.documentElement.clientWidth; + img.height = document.documentElement.clientHeight; + document.body.appendChild(img); + beforeRender = performance.now(); + }; + }, 'The intersectionRect of an img element overflowing is computed correctly'); +</script> + +</body> diff --git a/testing/web-platform/tests/element-timing/image-rect-iframe.html b/testing/web-platform/tests/element-timing/image-rect-iframe.html new file mode 100644 index 0000000000..3342f5688e --- /dev/null +++ b/testing/web-platform/tests/element-timing/image-rect-iframe.html @@ -0,0 +1,33 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: check intersectionRect for element in iframe</title> +<body> +<style> +body { + margin: 50px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + async_test((t) => { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + on_event(window, 'message', e => { + assert_equals(e.data.length, 1); + assert_equals(e.data.entryType, 'element'); + const rect = e.data.rect; + // rect should start at (0,0) even though main frame has a margin. + assert_equals(rect.left, 0); + assert_equals(rect.right, 100); + assert_equals(rect.top, 0); + assert_equals(rect.bottom, 100); + assert_equals(e.data.naturalWidth, 100); + assert_equals(e.data.naturalHeight, 100); + assert_equals(e.data.id, 'iframe_img_id'); + assert_equals(e.data.elementId, 'iframe_img_id'); + t.done(); + }); + }, 'Element Timing entry in iframe has coordinates relative to the iframe.'); +</script> +<iframe src="resources/iframe-with-square-sends-entry.html"></iframe> +</body> diff --git a/testing/web-platform/tests/element-timing/image-src-change.html b/testing/web-platform/tests/element-timing/image-src-change.html new file mode 100644 index 0000000000..7416a3f365 --- /dev/null +++ b/testing/web-platform/tests/element-timing/image-src-change.html @@ -0,0 +1,86 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: src change triggers new entry</title> + +<body> + <style> + body { + margin: 0; + } + + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="resources/element-timing-helpers.js"></script> + <img elementtiming='my_image' id='my_id' /> + <script> + setup({"hide_test_state": true}); + + const performanceEntryPromise = (pathname) => { + return new Promise(resolve => { + new PerformanceObserver((entryList, observer) => { + assert_equals(entryList.getEntries().length, 1); + if (entryList.getEntries()[0].url == pathname) { + observer.disconnect(); + resolve(entryList.getEntries()[0]); + } + }).observe({ type: 'element' }); + }); + } + + promise_test(async (t) => { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + + // Take beforeRender timestamp. + const beforeRender1 = performance.now(); + + const img = document.getElementById('my_id'); + + const url1 = 'resources/square100.png'; + + const pathname1 = (new URL(url1, document.location)).href + + // Register performance observer. + const promise1 = performanceEntryPromise(pathname1); + + //Load image + await new Promise(resolve => { + img.addEventListener('load', resolve); + img.src = url1; + }); + + // Get element entry. + const entry1 = await promise1; + + // Check entry. + checkElement(entry1, pathname1, 'my_image', 'my_id', beforeRender1, img); + checkRect(entry1, [0, 100, 0, 100]); + checkNaturalSize(entry1, 100, 100); + + // Take beforeRender timestamp before changing image src. + const beforeRender2 = performance.now(); + + // Set the src to trigger another entry. + const url2 = '/images/black-rectangle.png'; + + const pathname2 = (new URL(url2, document.location)).href; + + const promise2 = performanceEntryPromise(pathname2); + + //Load image with changed src. + await new Promise(resolve => { + img.addEventListener('load', resolve); + img.src = url2; + }); + + // Get the corresponding element entry. + const entry2 = await promise2; + + // Check entry. + checkElement(entry2, pathname2, 'my_image', 'my_id', beforeRender2, img); + checkRect(entry2, [0, 100, 0, 50]); + checkNaturalSize(entry2, 100, 50); + }, 'Element Timing: changing src causes a new entry to be dispatched.') + </script> + +</body> diff --git a/testing/web-platform/tests/element-timing/image-with-css-scale.html b/testing/web-platform/tests/element-timing/image-with-css-scale.html new file mode 100644 index 0000000000..a0490f375c --- /dev/null +++ b/testing/web-platform/tests/element-timing/image-with-css-scale.html @@ -0,0 +1,42 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: image with scaling.</title> +<head> +<style> +/* The margin of 50px allows the rect to be fully shown when the div is scaled. */ +body { + margin: 50px; +} +.my_div { + width: 100px; + height: 50px; + transform: scale(2); +} +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> + const beforeRender = performance.now(); + async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + const pathname = window.location.origin + '/images/black-rectangle.png'; + checkElement(entry, pathname, 'rectangle', 'rect_id', beforeRender, + document.getElementById('rect_id')); + checkRect(entry, [0, 200, 25, 125]); + checkNaturalSize(entry, 100, 50); + }) + ); + observer.observe({entryTypes: ['element']}); + }, 'Image intersectionRect is affected by scaling, but not its intrinsic size.'); +</script> +<div class="my_div" id='div_id'> + <img src="/images/black-rectangle.png" elementtiming="rectangle" id='rect_id'/> +</div> +</body> diff --git a/testing/web-platform/tests/element-timing/image-with-rotation.html b/testing/web-platform/tests/element-timing/image-with-rotation.html new file mode 100644 index 0000000000..229e9ae96c --- /dev/null +++ b/testing/web-platform/tests/element-timing/image-with-rotation.html @@ -0,0 +1,50 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: image with rotation.</title> +<head> +<style> +body { + margin: 0px; +} +.my_div { + width: 100px; + height: 50px; + transform: rotate(45deg); + transform-origin: top left; +} +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> + const beforeRender = performance.now(); + async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + const pathname = window.location.origin + '/images/black-rectangle.png'; + checkElement(entry, pathname, 'rectangle', 'rect_id', beforeRender, + document.getElementById('rect_id')); + checkNaturalSize(entry, 100, 50); + const rect = entry.intersectionRect; + // The div rotates with respect to the origin, so part of it will be invisible. + // The width of the visible part will be 100 / sqrt(2) and the height will be + // 100 / sqrt(2) + 50 / sqrt(2). + assert_equals(rect.left, 0); + // Checking precision only to the nearest integer. + assert_equals(Math.round(rect.right), 71); + assert_equals(rect.top, 0); + assert_equals(Math.round(rect.bottom), 106); + }) + ); + observer.observe({entryTypes: ['element']}); + }, 'Image intersectionRect is affected by rotation, but not its intrinsic size.'); +</script> +<div class="my_div" id="div_id"> + <img src="/images/black-rectangle.png" elementtiming="rectangle" id="rect_id"/> +</div> +</body> diff --git a/testing/web-platform/tests/element-timing/images-repeated-resource.html b/testing/web-platform/tests/element-timing/images-repeated-resource.html new file mode 100644 index 0000000000..f7296e05e7 --- /dev/null +++ b/testing/web-platform/tests/element-timing/images-repeated-resource.html @@ -0,0 +1,73 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe elements with the same resource</title> +<body> +<style> +body { + margin: 0; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> + let beforeRender; + let numEntries = 0; + let loadTime1; + let loadTime2; + let renderTime1; + let renderTime2; + let img; + let img2; + async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + const pathname = window.location.origin + '/element-timing/resources/square100.png'; + // Easier to check the |element| attribute here since element ID is the same for both images. + checkElement(entry, pathname, entry.identifier, 'image_id', beforeRender, null); + checkNaturalSize(entry, 100, 100); + if (entry.identifier === 'my_image') { + ++numEntries; + loadTime1 = entry.loadTime; + renderTime1 = entry.renderTime; + assert_equals(entry.element, img); + + img2 = document.createElement('img'); + img2.src = 'resources/square100.png'; + img2.setAttribute('elementtiming', 'my_image2'); + img2.setAttribute('id', 'image_id'); + document.body.appendChild(img2); + beforeRender = performance.now(); + } + else if (entry.identifier === 'my_image2') { + ++numEntries; + loadTime2 = entry.loadTime; + renderTime2 = entry.renderTime; + assert_equals(entry.element, img2); + } + if (numEntries == 2) { + assert_greater_than(loadTime2, loadTime1, 'Second image loads after first.'); + assert_greater_than(renderTime2, renderTime1, 'Second image renders after first'); + t.done(); + } + }) + ); + observer.observe({entryTypes: ['element']}); + // We add the images during onload to be sure that the observer is registered + // in time for it to observe the element timing. + window.onload = () => { + // Add image of width and height equal to 100. + img = document.createElement('img'); + img.src = 'resources/square100.png'; + img.setAttribute('elementtiming', 'my_image'); + img.setAttribute('id', 'image_id'); + document.body.appendChild(img); + beforeRender = performance.now(); + }; + }, 'Elements with elementtiming and same src are observable.'); +</script> + +</body> diff --git a/testing/web-platform/tests/element-timing/invisible-images.html b/testing/web-platform/tests/element-timing/invisible-images.html new file mode 100644 index 0000000000..ffde3ce2f6 --- /dev/null +++ b/testing/web-platform/tests/element-timing/invisible-images.html @@ -0,0 +1,79 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: invisible images are not observable</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #opacity0 { + opacity: 0; + } + #visibilityHidden { + visibility: hidden; + } + #displayNone { + display: none; + } +</style> +<script> + async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func_done((entries) => { + // The image should not have caused an entry, so fail test. + assert_unreached('Should not have received an entry! Received one with identifier ' + + entries.getEntries()[0].identifier); + }) + ); + observer.observe({entryTypes: ['element']}); + // We add the images during onload to be sure that the observer is registered + // in time for it to observe the element timing. + window.onload = () => { + const img = document.createElement('img'); + img.src = 'resources/square100.png'; + img.setAttribute('elementtiming', 'my_image'); + img.setAttribute('id', 'opacity0'); + document.body.appendChild(img); + + const img2 = document.createElement('img'); + img2.src = 'resources/square20.png'; + img2.setAttribute('elementtiming', 'my_image2'); + img2.setAttribute('id', 'visibilityHidden'); + document.body.appendChild(img2); + + const img3 = document.createElement('img'); + img3.src = 'resources/circle.svg'; + img3.setAttribute('elementtiming', 'my_image3'); + img3.setAttribute('id', 'displayNone'); + document.body.appendChild(img3); + + const div = document.createElement('div'); + div.setAttribute('id', 'opacity0'); + const img4 = document.createElement('img'); + img4.src = '/images/blue.png'; + img4.setAttribute('elementtiming', 'my_image4'); + div.appendChild(img4); + document.body.appendChild(div); + + const div2 = document.createElement('div'); + div2.setAttribute('id', 'visibilityHidden'); + const img5 = document.createElement('img'); + img5.src = '/images/blue.png'; + img5.setAttribute('elementtiming', 'my_image5'); + div.appendChild(img5); + document.body.appendChild(div2); + + const div3 = document.createElement('div'); + div3.setAttribute('id', 'displayNone'); + const img6 = document.createElement('img'); + img6.src = '/images/blue.png'; + img6.setAttribute('elementtiming', 'my_image6'); + div.appendChild(img6); + document.body.appendChild(div3); + // Images have been added but should not cause entries to be dispatched. + // Wait for 500ms and end test, ensuring no entry was created. + t.step_timeout(() => { + t.done(); + }, 500); + }; + }, 'Images with opacity: 0, visibility: hidden, or display: none are not observable.'); +</script> diff --git a/testing/web-platform/tests/element-timing/multiple-background-images.html b/testing/web-platform/tests/element-timing/multiple-background-images.html new file mode 100644 index 0000000000..380e5e825e --- /dev/null +++ b/testing/web-platform/tests/element-timing/multiple-background-images.html @@ -0,0 +1,58 @@ +<!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> diff --git a/testing/web-platform/tests/element-timing/multiple-redirects-TAO.html b/testing/web-platform/tests/element-timing/multiple-redirects-TAO.html new file mode 100644 index 0000000000..3a45b552be --- /dev/null +++ b/testing/web-platform/tests/element-timing/multiple-redirects-TAO.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta charset="utf-8" /> +<title>This test validates some Timing-Allow-Origin header usage in multiple redirects.</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script src="/common/get-host-info.sub.js"></script> +</head> +<body> +<script> +async_test(t => { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + let destUrl = get_host_info().HTTP_REMOTE_ORIGIN + + '/element-timing/resources/multiple-redirects.py?'; + destUrl += 'redirect_count=2'; + // The final resource has '*' in TAO header, so will not affect the result. + destUrl += '&final_resource=/element-timing/resources/circle-tao.svg'; + destUrl += '&origin1=' + get_host_info().UNAUTHENTICATED_ORIGIN; + destUrl += '&origin2=' + get_host_info().HTTP_REMOTE_ORIGIN; + const taoCombinations = [ + {tao1: location.origin, tao2: location.origin, passes: false}, + {tao1: location.origin, tao2: get_host_info().HTTP_REMOTE_ORIGIN, passes: false}, + {tao1: location.origin, tao2: 'null', passes: true}, + {tao1: location.origin, tao2: '*', passes: true}, + {tao1: location.origin, tao2: location.origin, passes: false}, + {tao1: 'null', tao2: '*', passes: false}, + {tao1: '*', tao2: 'null', passes: true}, + ]; + function getURL(item) { + return destUrl + '&tao1=' + item.tao1 + '&tao2=' + item.tao2; + } + taoCombinations.forEach((item, index) => { + const image = document.createElement('img'); + image.src = getURL(item); + image.setAttribute('elementtiming', item.passes.toString()); + image.setAttribute('id', index); + document.body.appendChild(image); + }); + let observed = new Array(taoCombinations.length).fill(false); + let observedCount = 0; + const beforeRender = performance.now(); + new PerformanceObserver(t.step_func(entries => { + entries.getEntries().forEach(e => { + const index = parseInt(e.id); + assert_false(observed[index]); + const item = taoCombinations[index]; + const url = getURL(item); + checkElement(e, url, item.passes.toString(), e.id, item.passes ? beforeRender : 0, + document.getElementById(e.id)); + observed[index] = true; + observedCount++; + if (observedCount === taoCombinations.length) + t.done(); + }); + })).observe({entryTypes: ['element']}); +}, 'Cross-origin images with passing/failing TAO should/shouldn\'t have its renderTime set.'); +</script> +</body> +</html> + diff --git a/testing/web-platform/tests/element-timing/observe-background-image.html b/testing/web-platform/tests/element-timing/observe-background-image.html new file mode 100644 index 0000000000..6a43401cd0 --- /dev/null +++ b/testing/web-platform/tests/element-timing/observe-background-image.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe element with background image</title> +<body> +<style> +body { + margin: 0; +} +#target { + width: 100px; + height: 50px; + background-image: url('/images/black-rectangle.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"); + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + const pathname = window.location.origin + '/images/black-rectangle.png'; + checkElement(entry, pathname, 'my_div', 'target', beforeRender, + document.getElementById('target')); + checkRect(entry, [0, 100, 0, 50]); + checkNaturalSize(entry, 100, 50); + }) + ); + observer.observe({entryTypes: ['element']}); + }, 'Element with elementtiming attribute and background image is observable.'); +</script> +<div id='target' elementtiming='my_div'></div> +</body> diff --git a/testing/web-platform/tests/element-timing/observe-child-element.html b/testing/web-platform/tests/element-timing/observe-child-element.html new file mode 100644 index 0000000000..c8071998c5 --- /dev/null +++ b/testing/web-platform/tests/element-timing/observe-child-element.html @@ -0,0 +1,41 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: do NOT observe elements from same-origin iframes</title> +<body> +<style> +body { + margin: 0; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> + async_test((t) => { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func_done((entryList) => { + assert_unreached("Should not have received an entry!"); + }) + ); + observer.observe({entryTypes: ['element']}); + // We add the iframe during onload to be sure that the observer is registered + // in time for it to observe the element timing. + // TODO(npm): change observer to use buffered flag. + window.onload = () => { + // Add iframe with an image of width and height equal to 100. + const iframe = document.createElement('iframe'); + iframe.src = 'resources/iframe-with-square.html'; + iframe.onload = () => { + // After a short delay, assume that the entry was not dispatched to the + // parent frame. + t.step_timeout(() => { + t.done(); + }, 100); + } + document.body.appendChild(iframe); + }; + }, 'Element in child iframe is not observed, even if same-origin.'); +</script> + +</body> diff --git a/testing/web-platform/tests/element-timing/observe-elementtiming.html b/testing/web-platform/tests/element-timing/observe-elementtiming.html new file mode 100644 index 0000000000..a204f0d677 --- /dev/null +++ b/testing/web-platform/tests/element-timing/observe-elementtiming.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe elements with elementtiming attribute</title> +<body> +<style> +body { + margin: 0; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> + let beforeRender; + let img; + async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + const pathname = window.location.origin + '/element-timing/resources/square100.png'; + checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img); + // Assume viewport has size at least 100, so the element is fully visible. + checkRect(entry, [0, 100, 0, 100]); + checkNaturalSize(entry, 100, 100); + }) + ); + observer.observe({entryTypes: ['element']}); + // We add the image during onload to be sure that the observer is registered + // in time for it to observe the element timing. + window.onload = () => { + // Add image of width equal to 100 and height equal to 100. + img = document.createElement('img'); + img.src = 'resources/square100.png'; + img.setAttribute('elementtiming', 'my_image'); + img.setAttribute('id', 'my_id'); + document.body.appendChild(img); + beforeRender = performance.now(); + }; + }, 'Element with elementtiming attribute is observable.'); +</script> + +</body> diff --git a/testing/web-platform/tests/element-timing/observe-empty-attribute.html b/testing/web-platform/tests/element-timing/observe-empty-attribute.html new file mode 100644 index 0000000000..baec6ee48d --- /dev/null +++ b/testing/web-platform/tests/element-timing/observe-empty-attribute.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe with empty elementtiming attribute</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> +let beforeRender; +async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + let observedImage = false; + let observedText = false; + const observer = new PerformanceObserver( + t.step_func(function(entryList) { + entryList.getEntries().forEach(entry => { + if (entry.name === 'image-paint') { + assert_false(observedImage, 'Image should only be observed once.'); + const pathname = window.location.origin + '/element-timing/resources/square20.png'; + checkElement(entry, pathname, '', 'square', beforeRender, + document.getElementById('square')); + checkNaturalSize(entry, 20, 20); + observedImage = true; + } else { + assert_false(observedText, 'Text should only be observed once.'); + checkTextElement(entry, '', 'text', beforeRender, document.getElementById('text')); + observedText = true; + } + }); + if (observedImage && observedText) + t.done(); + }) + ); + observer.observe({type: 'element', buffered: true}); + beforeRender = performance.now(); +}, "Able to observe image and text with empty elementtiming attribute."); +</script> +<img id='square' src='resources/square20.png' elementtiming/> +<p id='text' elementtiming>Text!</p> diff --git a/testing/web-platform/tests/element-timing/observe-multiple-images.html b/testing/web-platform/tests/element-timing/observe-multiple-images.html new file mode 100644 index 0000000000..c5ea700553 --- /dev/null +++ b/testing/web-platform/tests/element-timing/observe-multiple-images.html @@ -0,0 +1,122 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: multiple images</title> +<body> +<style> +body { + margin: 0; +} +#img1 { + display: block; + margin-left: auto; + margin-right: auto; +} +#img2 { + margin-top:150px; + margin-left:50px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> + let beforeRender, image1Observed=0, image2Observed=0, image3Observed=0; + async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func(function(entryList) { + entryList.getEntries().forEach( entry => { + if (entry.identifier === 'image1') { + if (image1Observed) { + assert_unreached("Observer received image1 more than once"); + t.done(); + } + image1Observed = 1; + const pathname1 = window.location.origin + '/element-timing/resources/square100.png'; + // The images do not contain ID, so expect an empty ID. + checkElement(entry, pathname1, 'image1', 'img1', beforeRender, + document.getElementById('img1')); + // This image is horizontally centered. + // Using abs and comparing to 1 because the viewport sizes could be odd. + // If a size is odd, then image cannot be in the pure center, but left + // and right should still be very close to their estimated coordinates. + assert_less_than_equal(Math.abs(entry.intersectionRect.left - + (document.documentElement.clientWidth / 2 - 50)), 1, + 'left of rect for image1'); + assert_less_than_equal(Math.abs(entry.intersectionRect.right - + (document.documentElement.clientWidth / 2 + 50)), 1, + 'right of rect for image1'); + assert_equals(entry.intersectionRect.top, 0, 'top of rect for image1'); + assert_equals(entry.intersectionRect.bottom, + 100, 'bottom of rect for image1'); + checkNaturalSize(entry, 100, 100); + } + else if (entry.identifier === 'image2') { + if (image2Observed) { + assert_unreached("Observer received image2 more than once"); + t.done(); + } + image2Observed = 1; + const pathname2 = window.location.origin + '/element-timing/resources/square20.png'; + checkElement(entry, pathname2, 'image2', 'img2', beforeRender, + document.getElementById('img2')); + // This image should be below image 1, and should respect the margin. + checkRect(entry, [50, 250, 250, 450], "of image2"); + checkNaturalSize(entry, 20, 20); + } + else if (entry.identifier === 'image3') { + if (image3Observed) { + assert_unreached("Observer received image3 more than once"); + t.done(); + } + image3Observed = 1; + const pathname3 = window.location.origin + '/element-timing/resources/circle.svg'; + checkElement(entry, pathname3, 'image3', 'img3', beforeRender, + document.getElementById('img3')); + // This image is just to the right of image2. + checkRect(entry, [250, 450, 250, 450], "of image3"); + checkNaturalSize(entry, 200, 200); + } + else { + assert_unreached("Received an unexpected identifier."); + t.done(); + } + if (image1Observed && image2Observed && image3Observed) { + t.done(); + } + }); + }) + ); + observer.observe({entryTypes: ['element']}); + function addImage(number, source, width=0) { + const img = document.createElement('img'); + img.src = source; + // Set a different id and elementtiming value for each image. + img.id = 'img' + number; + img.setAttribute('elementtiming', 'image' + number); + if (width !== 0) + img.width = width; + document.body.appendChild(img); + } + // Add the images during onload to be sure that the observer is registered in + // time to observe the element timing. + window.onload = () => { + addImage(1, 'resources/square100.png'); + // Use requestAnimationFrame and a timeout to ensure that the images are + // processed in the order we want. + requestAnimationFrame( () => { + t.step_timeout( () => { + // Set the size equal to that of image3 to make positioning easier. + addImage(2, 'resources/square20.png', 200); + requestAnimationFrame( () => { + t.step_timeout( () => { + addImage(3, 'resources/circle.svg'); + }, 0); + }); + }, 0); + }); + beforeRender = performance.now(); + }; + }, 'PerformanceObserver can observe multiple image elements.'); +</script> +</body> diff --git a/testing/web-platform/tests/element-timing/observe-shadow-image.html b/testing/web-platform/tests/element-timing/observe-shadow-image.html new file mode 100644 index 0000000000..e2a81d6244 --- /dev/null +++ b/testing/web-platform/tests/element-timing/observe-shadow-image.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: do not observe image in shadow tree</title> +<style> +body { + margin: 0; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<div id='target'></div> +<script> + async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_unreached('Should not observe elements in shadow trees!'); + }) + ); + observer.observe({entryTypes: ['element']}); + // We add the image during onload to be sure that the observer is registered + // in time for it to observe the element timing. + window.onload = () => { + // Add image of width equal to 100 and height equal to 100. + const img = document.createElement('img'); + img.src = 'resources/square100.png'; + img.setAttribute('elementtiming', 'my_image'); + img.setAttribute('id', 'my_id'); + const shadowRoot = document.getElementById('target').attachShadow({mode: 'open'}); + shadowRoot.appendChild(img); + t.step_timeout(() => { + // Assume entry was not dispatched, so test passes. + t.done(); + }, 500); + }; + }, 'Image in shadow tree with elementtiming attribute is not observable.'); +</script> diff --git a/testing/web-platform/tests/element-timing/observe-shadow-text.html b/testing/web-platform/tests/element-timing/observe-shadow-text.html new file mode 100644 index 0000000000..6e6347e60d --- /dev/null +++ b/testing/web-platform/tests/element-timing/observe-shadow-text.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: do not observe text in shadow tree</title> +<style> +body { + margin: 0; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<div id='target'></div> +<script> + async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_unreached('Should not observe text elements in shadow trees!'); + }) + ); + observer.observe({entryTypes: ['element']}); + // We add the text during onload to be sure that the observer is registered + // in time for it to observe the element timing. + window.onload = () => { + // Add text of width equal to 100 and height equal to 100. + const text = document.createElement('p'); + text.innerHTML = 'Text'; + text.setAttribute('elementtiming', 'my_text'); + const shadowRoot = document.getElementById('target').attachShadow({mode: 'open'}); + shadowRoot.appendChild(text); + t.step_timeout(() => { + // Assume entry was not dispatched, so test passes. + t.done(); + }, 500); + }; + }, 'Text in shadow tree with elementtiming attribute is not observable.'); +</script> diff --git a/testing/web-platform/tests/element-timing/observe-svg-image.html b/testing/web-platform/tests/element-timing/observe-svg-image.html new file mode 100644 index 0000000000..737f94f92b --- /dev/null +++ b/testing/web-platform/tests/element-timing/observe-svg-image.html @@ -0,0 +1,34 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe image inside SVG</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> +let beforeRender; +async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + const pathname = window.location.origin + '/element-timing/resources/circle.svg'; + checkElement(entry, pathname, 'my_svg', 'svg_id', beforeRender, + document.getElementById('svg_id')); + // Assume viewport has size at least 200, so the element is fully visible. + checkRect(entry, [0, 200, 0, 200]); + checkNaturalSize(entry, 200, 200); + }) + ); + observer.observe({entryTypes: ['element']}); + beforeRender = performance.now(); +}, "Able to observe svg image."); +</script> +<style> +body { + margin: 0; +} +</style> +<svg width="300" height="300"> + <image href='resources/circle.svg' elementtiming='my_svg' id='svg_id'/> +</svg> diff --git a/testing/web-platform/tests/element-timing/observe-text.html b/testing/web-platform/tests/element-timing/observe-text.html new file mode 100644 index 0000000000..5d8955269f --- /dev/null +++ b/testing/web-platform/tests/element-timing/observe-text.html @@ -0,0 +1,48 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe text</title> +<body> +<style> +body { + margin: 20px; +} +p { + font-size: 12px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> + async_test((t) => { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + let paragraph; + let beforeRender; + const observer = new PerformanceObserver( + t.step_func_done((entryList) => { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + checkTextElement(entry, 'my_text', 'text_id', beforeRender, paragraph); + assert_equals(entry.intersectionRect.left, 20, 'left should be 20.'); + // Text box size will vary from device to device, so try lower bounding height by 12, width by 100. + assert_greater_than_equal(entry.intersectionRect.right, 120); + + assert_equals(entry.intersectionRect.top, 20, 'top should be 20.'); + assert_greater_than_equal(entry.intersectionRect.bottom, 32); + }) + ); + observer.observe({entryTypes: ['element']}); + // We add the iframe during onload to be sure that the observer is registered + // in time for it to observe the element timing. + window.onload = () => { + paragraph = document.createElement('p'); + paragraph.innerHTML = 'This is text I care about'; + paragraph.setAttribute('elementtiming', 'my_text'); + paragraph.setAttribute('id', 'text_id'); + document.body.appendChild(paragraph); + beforeRender = performance.now(); + }; + }, 'Paragraph with elementtiming attribute is observed.'); +</script> + +</body> diff --git a/testing/web-platform/tests/element-timing/observe-video-poster.html b/testing/web-platform/tests/element-timing/observe-video-poster.html new file mode 100644 index 0000000000..ba1ddc7151 --- /dev/null +++ b/testing/web-platform/tests/element-timing/observe-video-poster.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe video poster image</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> +let beforeRender; +async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + const pathname = window.location.origin + '/element-timing/resources/circle.svg'; + checkElement(entry, pathname, 'my_poster', 'the_poster', beforeRender, + document.getElementById('the_poster')); + // Assume viewport has size at least 200, so the element is fully visible. + checkRect(entry, [0, 200, 0, 200]); + checkNaturalSize(entry, 200, 200); + }) + ); + observer.observe({entryTypes: ['element']}); + beforeRender = performance.now(); +}, "Able to observe a video's poster image."); +</script> +<style> +body { + margin: 0; +} +</style> +<video elementtiming='my_poster' id='the_poster' src='/media/test.mp4' poster='resources/circle.svg'></video> diff --git a/testing/web-platform/tests/element-timing/progressively-loaded-image.html b/testing/web-platform/tests/element-timing/progressively-loaded-image.html new file mode 100644 index 0000000000..6695d8f9c3 --- /dev/null +++ b/testing/web-platform/tests/element-timing/progressively-loaded-image.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<meta charset=utf-8 /> +<title>Element Timing: buffer elements before onload</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src="resources/element-timing-helpers.js"></script> +<body> +<script> + let beforeRender; + let img; + // Number of characters to be read on the initial read, before sleeping. + // Should be sufficient to do at least a first scan. + let numInitial = 75; + let sleep = 500; + async_test(function(t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const img_src = 'resources/progressive-image.py?name=square20.jpg&numInitial=' + + numInitial + '&sleep=' + sleep; + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + const pathname = window.location.origin + '/element-timing/' + img_src; + // Since the image is only fully loaded after the sleep, the render timestamp + // must be greater than |beforeRender| + |sleep|. + checkElement(entry, pathname, 'my_image', '', beforeRender + sleep, img); + checkNaturalSize(entry, 20, 20); + }) + ); + observer.observe({entryTypes: ['element']}); + + img = document.createElement('img'); + img.src = img_src; + img.setAttribute('elementtiming', 'my_image'); + document.body.appendChild(img); + beforeRender = performance.now(); + t.step_timeout(() => {assert_true(0);}, 2000); + }, "Element Timing: image render timestamp occurs after it is fully loaded."); +</script> diff --git a/testing/web-platform/tests/element-timing/rectangular-image.html b/testing/web-platform/tests/element-timing/rectangular-image.html new file mode 100644 index 0000000000..65f190e753 --- /dev/null +++ b/testing/web-platform/tests/element-timing/rectangular-image.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe a rectangular image</title> +<body> +<style> +body { + margin: 20px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> + let beforeRender; + let img; + async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + const pathname = window.location.origin + '/images/black-rectangle.png'; + checkElement(entry, pathname, 'my_image', 'rectangle', beforeRender, img); + // Assume viewport has size at least 100, so the element is fully visible. + checkRect(entry, [20, 120, 20, 70]); + checkNaturalSize(entry, 100, 50); + }) + ); + observer.observe({entryTypes: ['element']}); + // We add the image during onload to be sure that the observer is registered + // in time for it to observe the element timing. + window.onload = () => { + // Add image of width equal to 100 and height equal to 50. + img = document.createElement('img'); + img.src = '/images/black-rectangle.png'; + img.id = 'rectangle'; + img.setAttribute('elementtiming', 'my_image'); + document.body.appendChild(img); + beforeRender = performance.now(); + }; + }, 'Element with rectangular image has correct rect and instrinsic size.'); +</script> +</body> diff --git a/testing/web-platform/tests/element-timing/redirects-tao-star.html b/testing/web-platform/tests/element-timing/redirects-tao-star.html new file mode 100644 index 0000000000..e5067d3d6b --- /dev/null +++ b/testing/web-platform/tests/element-timing/redirects-tao-star.html @@ -0,0 +1,53 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta charset="utf-8" /> +<title>This test validates element timing information for cross-origin redirect chain images.</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script src=/common/get-host-info.sub.js></script> +</head> +<body> +<script> +async_test(t => { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + let destUrl = get_host_info().HTTP_REMOTE_ORIGIN + + '/resource-timing/resources/multi_redirect.py?'; + destUrl += 'page_origin=' + get_host_info().HTTP_ORIGIN; + destUrl += '&cross_origin=' + get_host_info().HTTP_REMOTE_ORIGIN; + destUrl += '&final_resource=' + '/element-timing/resources/circle-tao.svg'; + destUrl += '&timing_allow=1'; + destUrl += '&tao_steps='; + for (let taoSteps=0; taoSteps < 4; taoSteps++) { + const image = document.createElement('img'); + image.src = destUrl + taoSteps; + image.setAttribute('elementtiming', taoSteps); + image.setAttribute('id', 'id' + taoSteps) + document.body.appendChild(image); + } + let numObserved = 0; + let observedMap = [false, false, false, false]; + const beforeRender = performance.now(); + new PerformanceObserver(t.step_func(entries => { + entries.getEntries().forEach(entry => { + const taoSteps = entry.identifier; + assert_false(observedMap[taoSteps], 'Should observe each image once'); + observedMap[taoSteps] = true; + if (taoSteps !== '3') { + assert_equals(entry.renderTime, 0, + 'renderTime should be 0 when there is ' + taoSteps + ' tao steps'); + } + const bound = taoSteps === '3' ? beforeRender : 0; + checkElement(entry, destUrl + taoSteps, taoSteps, 'id' + taoSteps, bound, + document.getElementById(taoSteps)); + }); + numObserved += entries.getEntries().length; + if (numObserved === 4) + t.done(); + })).observe({type: 'element', buffered: true}); +}, 'Cross-origin image without TAO should not have its renderTime set, with full TAO it should.'); +</script> +</body> +</html> + diff --git a/testing/web-platform/tests/element-timing/resources/TAOImage.py b/testing/web-platform/tests/element-timing/resources/TAOImage.py new file mode 100644 index 0000000000..0e1c481489 --- /dev/null +++ b/testing/web-platform/tests/element-timing/resources/TAOImage.py @@ -0,0 +1,47 @@ +import os + +from wptserve.utils import isomorphic_encode + +def main(request, response): + origin = request.GET.first(b'origin') + if origin: + response.headers.set(b'Access-Control-Allow-Origin', origin) + + tao = request.GET.first(b'tao') + + if tao == b'wildcard': + # wildcard, pass + response.headers.set(b'Timing-Allow-Origin', b'*') + elif tao == b'null': + # null, fail + response.headers.set(b'Timing-Allow-Origin', b'null') + elif tao == b'origin': + # case-sensitive match for origin, pass + response.headers.set(b'Timing-Allow-Origin', origin) + elif tao == b'space': + # space separated list of origin and wildcard, fail + response.headers.set(b'Timing-Allow-Origin', (origin + b' *')) + elif tao == b'multi': + # more than one TAO values, separated by comma, pass + response.headers.set(b'Timing-Allow-Origin', origin) + response.headers.append(b'Timing-Allow-Origin', b'*') + elif tao == b'multi_wildcard': + # multiple wildcards, separated by comma, pass + response.headers.set(b'Timing-Allow-Origin', b'*') + response.headers.append(b'Timing-Allow-Origin', b'*') + elif tao == b'match_origin': + # contains a match of origin, separated by comma, pass + response.headers.set(b'Timing-Allow-Origin', origin) + response.headers.append(b'Timing-Allow-Origin', b"fake") + elif tao == b'match_wildcard': + # contains a wildcard, separated by comma, pass + response.headers.set(b'Timing-Allow-Origin', b"fake") + response.headers.append(b'Timing-Allow-Origin', b'*') + elif tao == b'uppercase': + # non-case-sensitive match for origin, fail + response.headers.set(b'Timing-Allow-Origin', origin.upper()) + else: + pass + response.headers.set(b"Cache-Control", b"no-cache, must-revalidate"); + image_path = os.path.join(os.path.dirname(isomorphic_encode(__file__)), b"square100.png"); + response.content = open(image_path, mode=u'rb').read(); diff --git a/testing/web-platform/tests/element-timing/resources/circle-tao.svg b/testing/web-platform/tests/element-timing/resources/circle-tao.svg new file mode 100644 index 0000000000..209b9f4e5b --- /dev/null +++ b/testing/web-platform/tests/element-timing/resources/circle-tao.svg @@ -0,0 +1,6 @@ +<?xml version="1.0"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" + "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> +<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> + <circle cx="50%" cy="50%" r="80" style="fill:blue;" /> +</svg> diff --git a/testing/web-platform/tests/element-timing/resources/circle-tao.svg.headers b/testing/web-platform/tests/element-timing/resources/circle-tao.svg.headers new file mode 100644 index 0000000000..7296361df3 --- /dev/null +++ b/testing/web-platform/tests/element-timing/resources/circle-tao.svg.headers @@ -0,0 +1 @@ +Timing-Allow-Origin: * diff --git a/testing/web-platform/tests/element-timing/resources/circle.svg b/testing/web-platform/tests/element-timing/resources/circle.svg new file mode 100644 index 0000000000..209b9f4e5b --- /dev/null +++ b/testing/web-platform/tests/element-timing/resources/circle.svg @@ -0,0 +1,6 @@ +<?xml version="1.0"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" + "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> +<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> + <circle cx="50%" cy="50%" r="80" style="fill:blue;" /> +</svg> diff --git a/testing/web-platform/tests/element-timing/resources/element-timing-helpers.js b/testing/web-platform/tests/element-timing/resources/element-timing-helpers.js new file mode 100644 index 0000000000..8175b0f385 --- /dev/null +++ b/testing/web-platform/tests/element-timing/resources/element-timing-helpers.js @@ -0,0 +1,74 @@ +// Common checks between checkElement() and checkElementWithoutResourceTiming(). +function checkElementInternal(entry, expectedUrl, expectedIdentifier, expectedID, beforeRender, + expectedElement) { + assert_equals(entry.entryType, 'element', 'entryType does not match'); + assert_equals(entry.url, expectedUrl, 'url does not match'); + assert_equals(entry.identifier, expectedIdentifier, 'identifier does not match'); + if (beforeRender != 0) { + // In this case, renderTime is not 0. + assert_greater_than(entry.renderTime, 0, 'renderTime should be nonzero'); + assert_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime'); + } else { + // In this case, renderTime is 0, so compare to loadTime. + assert_equals(entry.renderTime, 0, 'renderTime should be zero'); + assert_equals(entry.startTime, entry.loadTime, 'startTime should equal loadTime'); + } + assert_equals(entry.duration, 0, 'duration should be 0'); + assert_equals(entry.id, expectedID, 'id does not match'); + assert_greater_than_equal(entry.renderTime, beforeRender, 'renderTime greater than beforeRender'); + assert_greater_than_equal(performance.now(), entry.renderTime, 'renderTime bounded by now()'); + if (expectedElement !== null) { + assert_equals(entry.element, expectedElement, 'element does not match'); + assert_equals(entry.identifier, expectedElement.elementTiming, + 'identifier must be the elementtiming of the element'); + assert_equals(entry.id, expectedElement.id, 'id must be the id of the element'); + } +} + +// Checks that this is an ElementTiming entry with url |expectedUrl|. It also +// does a very basic check on |renderTime|: after |beforeRender| and before now(). +function checkElement(entry, expectedUrl, expectedIdentifier, expectedID, beforeRender, + expectedElement) { + checkElementInternal(entry, expectedUrl, expectedIdentifier, expectedID, beforeRender, + expectedElement); + assert_equals(entry.name, 'image-paint', 'The entry name should be image-paint.'); + const rt_entries = performance.getEntriesByName(expectedUrl, 'resource'); + assert_equals(rt_entries.length, 1, 'There should be only 1 resource entry.'); + assert_greater_than_equal(entry.loadTime, rt_entries[0].responseEnd, + 'Image loadTime is after the resource responseEnd'); +} + +function checkElementWithoutResourceTiming(entry, expectedUrl, expectedIdentifier, + expectedID, beforeRender, expectedElement) { + checkElementInternal(entry, expectedUrl, expectedIdentifier, expectedID, beforeRender, + expectedElement); + assert_equals(entry.name, 'image-paint'); + // No associated resource from ResourceTiming, so not much to compare loadTime with. + assert_greater_than(entry.loadTime, 0, 'The entry loadTime should be greater than 0.'); +} + +// Checks that the rect matches the desired values [left right top bottom]. +function checkRect(entry, expected, description="") { + assert_equals(entry.intersectionRect.left, expected[0], + 'left of rect ' + description); + assert_equals(entry.intersectionRect.right, expected[1], + 'right of rect ' + description); + assert_equals(entry.intersectionRect.top, expected[2], + 'top of rect ' + description); + assert_equals(entry.intersectionRect.bottom, expected[3], + 'bottom of rect ' + description); +} + +// Checks that the intrinsic size matches the desired values. +function checkNaturalSize(entry, width, height) { + assert_equals(entry.naturalWidth, width, 'The entry naturalWidth is not as expected.'); + assert_equals(entry.naturalHeight, height, 'The entry naturalHeight is not as expected.'); +} + +function checkTextElement(entry, expectedIdentifier, expectedID, beforeRender, + expectedElement) { + checkElementInternal(entry, '', expectedIdentifier, expectedID, beforeRender, + expectedElement); + assert_equals(entry.name, 'text-paint', 'The entry name should be text-paint.'); + assert_equals(entry.loadTime, 0, 'The entry loadTime should be 0.'); +} diff --git a/testing/web-platform/tests/element-timing/resources/iframe-stores-entry.html b/testing/web-platform/tests/element-timing/resources/iframe-stores-entry.html new file mode 100644 index 0000000000..2fa2476972 --- /dev/null +++ b/testing/web-platform/tests/element-timing/resources/iframe-stores-entry.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<body> +<p elementtiming='text'>Text</p> +<script> + const observer = new PerformanceObserver(entryList => { + window.parent.triggerTest(entryList.getEntries()[0]); + }); + observer.observe({type: 'element', buffered: true}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/element-timing/resources/iframe-with-content.html b/testing/web-platform/tests/element-timing/resources/iframe-with-content.html new file mode 100644 index 0000000000..ab8cdfde01 --- /dev/null +++ b/testing/web-platform/tests/element-timing/resources/iframe-with-content.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<body> +<p>Text</p> +<img src='/images/blue.png'/> +</body> diff --git a/testing/web-platform/tests/element-timing/resources/iframe-with-square-sends-entry.html b/testing/web-platform/tests/element-timing/resources/iframe-with-square-sends-entry.html new file mode 100644 index 0000000000..b8af505d32 --- /dev/null +++ b/testing/web-platform/tests/element-timing/resources/iframe-with-square-sends-entry.html @@ -0,0 +1,26 @@ +<!DOCType html> +<html> +<style> +body { + margin: 0; +} +</style> +<body> +<script> + const observer = new PerformanceObserver(entryList => { + top.postMessage({ + 'length' : entryList.getEntries().length, + 'entryType' : entryList.getEntries()[0].entryType, + 'rect' : entryList.getEntries()[0].intersectionRect, + 'naturalWidth' : entryList.getEntries()[0].naturalWidth, + 'naturalHeight' : entryList.getEntries()[0].naturalHeight, + 'id': entryList.getEntries()[0].id, + // Elements cannot be cloned, so just send the element ID. + 'elementId' : entryList.getEntries()[0].element.id, + }, '*'); + }); + observer.observe({entryTypes: ['element']}); +</script> +<img src=square100.png id=iframe_img_id elementtiming=my_image/> +</body> +</html> diff --git a/testing/web-platform/tests/element-timing/resources/iframe-with-square.html b/testing/web-platform/tests/element-timing/resources/iframe-with-square.html new file mode 100644 index 0000000000..0a905d22b9 --- /dev/null +++ b/testing/web-platform/tests/element-timing/resources/iframe-with-square.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<body> +<style> +body { + margin: 0; +} +</style> +<img src='square100.png' elementtiming="my_image"> +</body> diff --git a/testing/web-platform/tests/element-timing/resources/multiple-redirects.py b/testing/web-platform/tests/element-timing/resources/multiple-redirects.py new file mode 100644 index 0000000000..3efc634b99 --- /dev/null +++ b/testing/web-platform/tests/element-timing/resources/multiple-redirects.py @@ -0,0 +1,59 @@ +from wptserve.utils import isomorphic_encode + +def main(request, response): + """Handler that causes multiple redirections. + + Mandatory parameters: + redirect_count - A number which is at least 1 (number of redirects). + final_resource - The location of the last redirect. + + For each number i between 1 and |redirect_count| we have the following optional parameters: + tao{{i}} - The Timing-Allow-Origin header of the ith response. Default is no header. + origin{{i}} - The origin of the ith redirect (i+1 response). Default is location.origin. + Note that the origin of the initial request cannot be controlled here + and the Timing-Allow-Origin header of the final response cannot be controlled here. + + Example: redirect_count=2&final_resource=miau.png&tao1=* + + Note: |step| is used internally to track the current redirect number. + """ + step = 1 + if b"step" in request.GET: + try: + step = int(request.GET.first(b"step")) + except ValueError: + pass + + redirect_count = int(request.GET.first(b"redirect_count")) + final_resource = request.GET.first(b"final_resource") + + tao_value = None + tao = b"tao" + isomorphic_encode(str(step)) + if tao in request.GET: + tao_value = request.GET.first(tao) + + redirect_url = b"" + origin = b"origin" + isomorphic_encode(str(step)) + if origin in request.GET: + redirect_url = request.GET.first(origin) + + if step == redirect_count: + redirect_url += final_resource + else: + redirect_url += b"/element-timing/resources/multiple-redirects.py?" + redirect_url += b"redirect_count=" + isomorphic_encode(str(redirect_count)) + redirect_url += b"&final_resource=" + final_resource + for i in range(1, redirect_count + 1): + tao = b"tao" + isomorphic_encode(str(i)) + if tao in request.GET: + redirect_url += b"&" + tao + b"=" + request.GET.first(tao) + origin = b"origin" + isomorphic_encode(str(i)) + if origin in request.GET: + redirect_url += b"&" + origin + b"=" + request.GET.first(origin) + redirect_url += b"&step=" + isomorphic_encode(str(step + 1)) + + if tao_value: + response.headers.set(b"timing-allow-origin", tao_value) + + response.status = 302 + response.headers.set(b"Location", redirect_url) diff --git a/testing/web-platform/tests/element-timing/resources/progressive-image.py b/testing/web-platform/tests/element-timing/resources/progressive-image.py new file mode 100644 index 0000000000..84e98c8451 --- /dev/null +++ b/testing/web-platform/tests/element-timing/resources/progressive-image.py @@ -0,0 +1,27 @@ +import os.path +import time + +from wptserve.utils import isomorphic_encode + +def main(request, response): + name = request.GET.first(b"name") + sleepTime = float(request.GET.first(b"sleep")) / 1E3 + numInitial = int(request.GET.first(b"numInitial")) + + path = os.path.join(os.path.dirname(isomorphic_encode(__file__)), name) + body = open(path, u"rb").read() + + response.headers.set(b"Content-Type", b"image") + response.headers.set(b"Content-Length", len(body)) + response.headers.set(b"Cache-control", b"no-cache, must-revalidate") + response.write_status_headers() + + # Read from the beginning, |numInitial| bytes. + first = body[:numInitial] + response.writer.write_content(first) + + time.sleep(sleepTime) + + # Read the remainder after having slept. + second = body[numInitial:] + response.writer.write_content(second) diff --git a/testing/web-platform/tests/element-timing/resources/slow-image.py b/testing/web-platform/tests/element-timing/resources/slow-image.py new file mode 100644 index 0000000000..10172fd35a --- /dev/null +++ b/testing/web-platform/tests/element-timing/resources/slow-image.py @@ -0,0 +1,19 @@ +import os.path +import time + +from wptserve.utils import isomorphic_encode + +def main(request, response): + name = request.GET.first(b"name") + sleepTime = float(request.GET.first(b"sleep")) / 1E3 + + time.sleep(sleepTime) + + path = os.path.join(os.path.dirname(isomorphic_encode(__file__)), name) + body = open(path, u"rb").read() + + response.headers.set(b"Content-Type", b"image") + response.headers.set(b"Content-Length", len(body)) + response.headers.set(b"Cache-control", b"no-cache, must-revalidate") + + response.content = body; diff --git a/testing/web-platform/tests/element-timing/resources/square100.png b/testing/web-platform/tests/element-timing/resources/square100.png Binary files differnew file mode 100644 index 0000000000..567babb96d --- /dev/null +++ b/testing/web-platform/tests/element-timing/resources/square100.png diff --git a/testing/web-platform/tests/element-timing/resources/square20.jpg b/testing/web-platform/tests/element-timing/resources/square20.jpg Binary files differnew file mode 100644 index 0000000000..83ed4914bb --- /dev/null +++ b/testing/web-platform/tests/element-timing/resources/square20.jpg diff --git a/testing/web-platform/tests/element-timing/resources/square20.png b/testing/web-platform/tests/element-timing/resources/square20.png Binary files differnew file mode 100644 index 0000000000..4d51ac4b46 --- /dev/null +++ b/testing/web-platform/tests/element-timing/resources/square20.png diff --git a/testing/web-platform/tests/element-timing/retrievability.html b/testing/web-platform/tests/element-timing/retrievability.html new file mode 100644 index 0000000000..cd2c2a956e --- /dev/null +++ b/testing/web-platform/tests/element-timing/retrievability.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: 'element' entries are not accessible via performance timeline</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> + let img; + async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const beforeRender = performance.now(); + new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + assert_equals(entry.entryType, 'element'); + assert_equals(entry.name, 'image-paint'); + + const entriesByName = performance.getEntriesByName('image-paint', 'element'); + const entriesByType = performance.getEntriesByType('element'); + const allEntries = performance.getEntries(); + assert_equals(entriesByName.length, 0, 'Element Timing entry should not be retrievable by getEntriesByName'); + assert_equals(entriesByType.length, 0, 'Element Timing entry should not be retrievable by getEntriesByType'); + assert_equals(allEntries.filter(e => e.entryType === 'element').length, 0, 'Element Timing entry should not be retrievable by getEntries'); + }) + ).observe({type: 'element', buffered: true}); + }, 'Element Timing entries are not accessible via performance.getEntries*'); +</script> +<img src='resources/square100.png' elementtiming='my_image' id='my_id'/> diff --git a/testing/web-platform/tests/element-timing/same-origin-redirects.html b/testing/web-platform/tests/element-timing/same-origin-redirects.html new file mode 100644 index 0000000000..e52fcecc1a --- /dev/null +++ b/testing/web-platform/tests/element-timing/same-origin-redirects.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta charset="utf-8" /> +<title>This test validates element timing information for same-origin redirect chain.</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +</head> +<body> +<script> +async_test(t => { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + // First redirect + let destUrl = '/common/redirect.py?location=' + // Second redirect + destUrl += '/common/redirect.py?location=' + // Image without TAO headers. + destUrl += '/element-timing/resources/square20.png'; + let beforeRender; + new PerformanceObserver(t.step_func_done(entries => { + assert_equals(entries.getEntries().length, 1, 'There should be one entry'); + const entry = entries.getEntries()[0]; + checkElement(entry, location.origin + destUrl, 'et', 'id', beforeRender, + document.getElementById('id')); + })).observe({entryTypes: ['element']}); + const image = document.createElement('img'); + image.src = destUrl; + image.setAttribute('elementtiming', 'et'); + image.setAttribute('id', 'id') + document.body.appendChild(image); + beforeRender = performance.now(); +}, 'Same-origin image redirect without TAO should have its renderTime set.'); +</script> +</body> +</html> + diff --git a/testing/web-platform/tests/element-timing/scroll-to-text.html b/testing/web-platform/tests/element-timing/scroll-to-text.html new file mode 100644 index 0000000000..0508d2bcf9 --- /dev/null +++ b/testing/web-platform/tests/element-timing/scroll-to-text.html @@ -0,0 +1,30 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe text that is initially not visible</title> +<body> +<style> +.big { + width: 100%; + height: 100vh; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<div class='big'></div> +<p elementtiming='observeMe'>Test text</p> +<script> + async_test((t) => { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver(t.step_func_done(() => {})); + observer.observe({type: 'element', buffered: true}); + window.onload = () => { + // The div occupies the whole screen because it occupies 100% of the height. + // We scroll to the end of the document so that the paragraph becomes visible. + // A user agent could paint the text before or after scrolling, but either way + // it must produce an entry for it. + window.scrollTo(0,document.scrollingElement.scrollHeight); + }; + }, 'Paragraph with elementtiming attribute is observed even when not initially visible.'); +</script> +</body> diff --git a/testing/web-platform/tests/element-timing/supported-element-type.html b/testing/web-platform/tests/element-timing/supported-element-type.html new file mode 100644 index 0000000000..15733d46f9 --- /dev/null +++ b/testing/web-platform/tests/element-timing/supported-element-type.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<head> +<title>PerformanceObserver.supportedEntryTypes contains "element"</title> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +test(() => { + if (typeof PerformanceObserver.supportedEntryTypes === "undefined") + assert_unreached("supportedEntryTypes is not supported."); + assert_greater_than(PerformanceObserver.supportedEntryTypes.indexOf("element"), -1, + "There should be an entry 'element' in PerformanceObserver.supportedEntryTypes"); +}, "supportedEntryTypes contains 'element'."); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/element-timing/text-with-display-style.html b/testing/web-platform/tests/element-timing/text-with-display-style.html new file mode 100644 index 0000000000..94e89fcf72 --- /dev/null +++ b/testing/web-platform/tests/element-timing/text-with-display-style.html @@ -0,0 +1,54 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe text with display style.</title> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<style> +h1 { + display: flex; +} +h2 { + display: grid; +} +h3 { + display: block; +} +</style> +<h1 id='title1' elementtiming='h1'>I am h1</h1> +<h2 id='title2' elementtiming='h2'>I am h2</h2> +<h3 id='title3' elementtiming='h3'>I am h3</h3> +<script> + async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const beforeRender = performance.now(); + let observedFlex = false; + let observedGrid = false; + let observedBlock = false; + const observer = new PerformanceObserver( + t.step_func(function(entryList) { + entryList.getEntries().forEach(entry => { + if (entry.id === 'title1') { + assert_false(observedFlex, 'Should observe flex once'); + observedFlex = true; + checkTextElement(entry, 'h1', 'title1', beforeRender, document.getElementById('title1')); + } else if (entry.id === 'title2') { + assert_false(observedGrid, 'Should observe grid once'); + observedGrid = true; + checkTextElement(entry, 'h2', 'title2', beforeRender, document.getElementById('title2')); + } else { + assert_equals(entry.id, 'title3', 'ID should be title1, title2, or title3'); + assert_false(observedBlock, 'Should observe block once'); + observedBlock = true; + checkTextElement(entry, 'h3', 'title3', beforeRender, document.getElementById('title3')); + } + }); + if (observedFlex && observedGrid && observedBlock) + t.done(); + }) + ); + observer.observe({type: 'element', buffered: true}); + }, 'Text with display style is observable.'); +</script> +</body> diff --git a/testing/web-platform/tests/element-timing/toJSON.html b/testing/web-platform/tests/element-timing/toJSON.html new file mode 100644 index 0000000000..a9f6a5180a --- /dev/null +++ b/testing/web-platform/tests/element-timing/toJSON.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: toJSON</title> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<img elementtiming='img' src="resources/square100.png"/> +<script> + async_test(function (t) { + assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + assert_equals(typeof(entry.toJSON), 'function'); + const json = entry.toJSON(); + assert_equals(typeof(json), 'object'); + const keys = [ + // PerformanceEntry + 'name', + 'entryType', + 'startTime', + 'duration', + // PerformanceElementTiming + 'renderTime', + 'loadTime', + 'intersectionRect', + 'identifier', + 'naturalWidth', + 'naturalHeight', + 'id', + 'url', + ]; + for (const key of keys) { + assert_equals(json[key], entry[key], + 'PerformanceElementTiming ${key} entry does not match its toJSON value'); + } + assert_equals(json['element'], undefined, 'toJSON should not include element'); + }) + ); + observer.observe({type: 'element', buffered: true}); + }, 'Test toJSON() in PerformanceElementTiming.'); +</script> +</body> |
