mirror of
https://github.com/servo/servo.git
synced 2025-08-25 07:08:21 +01:00
Update web-platform-tests to revision e45156b5e558c062a609356905c83a0258c516e3
This commit is contained in:
parent
9f6005be16
commit
5fcf52d946
199 changed files with 4430 additions and 530 deletions
|
@ -25,7 +25,7 @@ body {
|
|||
// 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);
|
||||
beforeRender, document.getElementById('target'));
|
||||
// The background image is a red square of length 10.
|
||||
checkRect(entry, [0, 100, 0, 50]);
|
||||
checkNaturalSize(entry, 10, 10);
|
||||
|
|
|
@ -36,14 +36,16 @@ body {
|
|||
numObservedElements++;
|
||||
if (entry.id == 'div1') {
|
||||
observedDiv1 = true;
|
||||
checkElement(entry, pathname, 'et1', 'div1', beforeRender);
|
||||
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') {
|
||||
observedDiv2 = true;
|
||||
checkElement(entry, pathname, 'et2', 'div2', beforeRender);
|
||||
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);
|
||||
|
|
|
@ -25,7 +25,8 @@ body {
|
|||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index) +
|
||||
'/resources/square100.png';
|
||||
checkElement(entry, pathname, 'my_div', 'target', beforeRender);
|
||||
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.
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index) +
|
||||
'/resources/square20.jpg';
|
||||
checkElement(entry, pathname, 'my_image', 'my_id', beforeRender);
|
||||
checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img);
|
||||
checkNaturalSize(entry, 20, 20);
|
||||
});
|
||||
}, "Element Timing: image loads before onload.");
|
||||
|
|
|
@ -12,13 +12,14 @@ body {
|
|||
<script src="resources/element-timing-helpers.js"></script>
|
||||
<script>
|
||||
async_test((t) => {
|
||||
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);
|
||||
checkElement(entry, pathname, 'my_image', 'the_id', 0, img);
|
||||
assert_equals(entry.startTime, 0,
|
||||
'The startTime of a cross-origin image should be 0.');
|
||||
checkRect(entry, [0, 100, 0, 100]);
|
||||
|
@ -31,7 +32,7 @@ body {
|
|||
// TODO(npm): change observer to use buffered flag.
|
||||
window.onload = t.step_func(() => {
|
||||
// Add a cross origin image resource.
|
||||
const img = document.createElement('img');
|
||||
img = document.createElement('img');
|
||||
img.src = pathname;
|
||||
img.setAttribute('elementtiming', 'my_image');
|
||||
img.setAttribute('id', 'the_id');
|
||||
|
|
|
@ -0,0 +1,42 @@
|
|||
<!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) {
|
||||
const observer = new PerformanceObserver(
|
||||
t.step_func_done(function(entryList) {
|
||||
assert_equals(entryList.getEntries().length, 1);
|
||||
const entry = entryList.getEntries()[0];
|
||||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index) +
|
||||
'/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>
|
|
@ -13,13 +13,14 @@ body {
|
|||
<script>
|
||||
async_test((t) => {
|
||||
let beforeRender;
|
||||
let img;
|
||||
const img_src = 'http://{{domains[www]}}:{{ports[http][1]}}/element-timing/'
|
||||
+ 'resources/TAOImage.py?tao=wildcard';
|
||||
const observer = new PerformanceObserver(
|
||||
t.step_func_done((entryList) => {
|
||||
assert_equals(entryList.getEntries().length, 1);
|
||||
const entry = entryList.getEntries()[0];
|
||||
checkElement(entry, img_src, 'my_image', 'my_id', beforeRender);
|
||||
checkElement(entry, img_src, 'my_image', 'my_id', beforeRender, img);
|
||||
// Assume viewport has size at least 20, so the element is fully visible.
|
||||
checkRect(entry, [0, 20, 0, 20]);
|
||||
checkNaturalSize(entry, 20, 20);
|
||||
|
@ -30,7 +31,7 @@ body {
|
|||
// in time for it to observe the element timing.
|
||||
// TODO(npm): change observer to use buffered flag.
|
||||
window.onload = t.step_func(() => {
|
||||
const img = document.createElement('img');
|
||||
img = document.createElement('img');
|
||||
img.src = img_src;
|
||||
img.setAttribute('elementtiming', 'my_image');
|
||||
img.setAttribute('id', 'my_id');
|
||||
|
|
|
@ -37,13 +37,15 @@ body {
|
|||
const observer = new PerformanceObserver(list => {
|
||||
list.getEntries().forEach(entry => {
|
||||
if (entry_count % 2 == 0) {
|
||||
checkElement(entry, pathname0, 'image0', 'image0', beforeRenderTimes[entry_count]);
|
||||
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]);
|
||||
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]++;
|
||||
|
|
|
@ -14,7 +14,8 @@ async_test(function (t) {
|
|||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index) +
|
||||
'/resources/circle.svg';
|
||||
checkElement(entry, pathname, 'my_svg', 'SVG', beforeRender);
|
||||
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);
|
||||
|
|
|
@ -23,7 +23,7 @@ body {
|
|||
// 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);
|
||||
beforeRender, document.getElementById('inline_wee'));
|
||||
// The image is a red square of length 10.
|
||||
checkRect(entry, [0, 10, 0, 10]);
|
||||
checkNaturalSize(entry, 10, 10);
|
||||
|
|
|
@ -12,6 +12,7 @@ body {
|
|||
<script src="resources/element-timing-helpers.js"></script>
|
||||
<script>
|
||||
let beforeRender;
|
||||
let img;
|
||||
async_test(function (t) {
|
||||
const observer = new PerformanceObserver(
|
||||
t.step_func_done(function(entryList) {
|
||||
|
@ -20,7 +21,7 @@ body {
|
|||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index) +
|
||||
'/resources/square20.png';
|
||||
checkElement(entry, pathname, 'not_fully_visible', '', beforeRender);
|
||||
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,
|
||||
|
@ -33,7 +34,7 @@ body {
|
|||
// in time for it to observe the element timing.
|
||||
window.onload = () => {
|
||||
// Add an image setting width and height equal to viewport.
|
||||
const img = document.createElement('img');
|
||||
img = document.createElement('img');
|
||||
img.src = 'resources/square20.png';
|
||||
img.setAttribute('elementtiming', 'not_fully_visible');
|
||||
img.width = document.documentElement.clientWidth;
|
||||
|
|
|
@ -23,6 +23,7 @@ body {
|
|||
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.');
|
||||
|
|
|
@ -28,7 +28,8 @@ body {
|
|||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index - 14) +
|
||||
'images/black-rectangle.png';
|
||||
checkElement(entry, pathname, 'rectangle', 'rect_id', beforeRender);
|
||||
checkElement(entry, pathname, 'rectangle', 'rect_id', beforeRender,
|
||||
document.getElementById('rect_id'));
|
||||
checkRect(entry, [0, 200, 25, 125]);
|
||||
checkNaturalSize(entry, 100, 50);
|
||||
})
|
||||
|
|
|
@ -28,7 +28,8 @@ body {
|
|||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index - 14) +
|
||||
'images/black-rectangle.png';
|
||||
checkElement(entry, pathname, 'rectangle', 'rect_id', beforeRender);
|
||||
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.
|
||||
|
|
|
@ -15,6 +15,8 @@ body {
|
|||
let numEntries = 0;
|
||||
let responseEnd1;
|
||||
let responseEnd2;
|
||||
let img;
|
||||
let img2;
|
||||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index) +
|
||||
'/resources/square100.png';
|
||||
|
@ -22,15 +24,18 @@ body {
|
|||
const observer = new PerformanceObserver(
|
||||
t.step_func(function(entryList) {
|
||||
entryList.getEntries().forEach(entry => {
|
||||
checkElement(entry, pathname, entry.identifier, 'image_id', beforeRender);
|
||||
// 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;
|
||||
responseEnd1 = entry.responseEnd;
|
||||
assert_equals(entry.element, img);
|
||||
}
|
||||
else if (entry.identifier === 'my_image2') {
|
||||
++numEntries;
|
||||
responseEnd2 = entry.responseEnd;
|
||||
assert_equals(entry.element, img2);
|
||||
}
|
||||
});
|
||||
if (numEntries == 2) {
|
||||
|
@ -44,13 +49,13 @@ body {
|
|||
// in time for it to observe the element timing.
|
||||
window.onload = () => {
|
||||
// Add image of width and height equal to 100.
|
||||
const img = document.createElement('img');
|
||||
img = document.createElement('img');
|
||||
img.src = 'resources/square100.png';
|
||||
img.setAttribute('elementtiming', 'my_image');
|
||||
img.setAttribute('id', 'image_id');
|
||||
document.body.appendChild(img);
|
||||
|
||||
const img2 = document.createElement('img');
|
||||
img2 = document.createElement('img');
|
||||
img2.src = 'resources/square100.png';
|
||||
img2.setAttribute('elementtiming', 'my_image2');
|
||||
img2.setAttribute('id', 'image_id');
|
||||
|
|
|
@ -23,19 +23,20 @@ body {
|
|||
let observedSquare = false;
|
||||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index) + '/resources/';
|
||||
let div = document.getElementById('target');
|
||||
const observer = new PerformanceObserver(
|
||||
t.step_func(entryList => {
|
||||
entryList.getEntries().forEach(entry => {
|
||||
numObservedElements++;
|
||||
if (entry.name.endsWith('square100.png')) {
|
||||
observedSquare = true;
|
||||
checkElement(entry, pathname + 'square100.png', 'multi', 'target', beforeRender);
|
||||
checkElement(entry, pathname + 'square100.png', 'multi', 'target', beforeRender, div);
|
||||
checkRect(entry, [0, 200, 0, 200]);
|
||||
checkNaturalSize(entry, 100, 100);
|
||||
}
|
||||
else if (entry.name.endsWith('circle.svg')) {
|
||||
observedCircle = true;
|
||||
checkElement(entry, pathname + 'circle.svg', 'multi', 'target', beforeRender);
|
||||
checkElement(entry, pathname + 'circle.svg', 'multi', 'target', beforeRender, div);
|
||||
checkRect(entry, [0, 200, 0, 200]);
|
||||
checkNaturalSize(entry, 200, 200);
|
||||
}
|
||||
|
|
|
@ -25,7 +25,8 @@ body {
|
|||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index - 14) +
|
||||
'images/black-rectangle.png';
|
||||
checkElement(entry, pathname, 'my_div', 'target', beforeRender);
|
||||
checkElement(entry, pathname, 'my_div', 'target', beforeRender,
|
||||
document.getElementById('target'));
|
||||
checkRect(entry, [0, 100, 0, 50]);
|
||||
checkNaturalSize(entry, 100, 50);
|
||||
})
|
||||
|
|
|
@ -12,6 +12,7 @@ body {
|
|||
<script src="resources/element-timing-helpers.js"></script>
|
||||
<script>
|
||||
let beforeRender;
|
||||
let img;
|
||||
async_test(function (t) {
|
||||
const observer = new PerformanceObserver(
|
||||
t.step_func_done(function(entryList) {
|
||||
|
@ -20,7 +21,7 @@ body {
|
|||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index) +
|
||||
'/resources/square100.png';
|
||||
checkElement(entry, pathname, 'my_image', 'my_id', beforeRender);
|
||||
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);
|
||||
|
@ -31,7 +32,7 @@ body {
|
|||
// 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 = document.createElement('img');
|
||||
img.src = 'resources/square100.png';
|
||||
img.setAttribute('elementtiming', 'my_image');
|
||||
img.setAttribute('id', 'my_id');
|
||||
|
|
|
@ -12,6 +12,7 @@ body {
|
|||
<script src="resources/element-timing-helpers.js"></script>
|
||||
<script>
|
||||
let beforeRender;
|
||||
let img;
|
||||
async_test(function (t) {
|
||||
const observer = new PerformanceObserver(
|
||||
t.step_func_done(function(entryList) {
|
||||
|
@ -20,7 +21,7 @@ body {
|
|||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index) +
|
||||
'/resources/square20.jpg';
|
||||
checkElement(entry, pathname, '', 'large_one', beforeRender);
|
||||
checkElement(entry, pathname, '', 'large_one', beforeRender, img);
|
||||
// Assume viewport hasn't changed, so the element occupies all of it.
|
||||
checkRect(entry,
|
||||
[0, document.documentElement.clientWidth, 0, document.documentElement.clientHeight]);
|
||||
|
@ -32,7 +33,7 @@ body {
|
|||
// in time for it to observe the element timing.
|
||||
window.onload = () => {
|
||||
// Add an image setting width and height equal to viewport.
|
||||
const img = document.createElement('img');
|
||||
img = document.createElement('img');
|
||||
img.src = 'resources/square20.jpg';
|
||||
img.width = document.documentElement.clientWidth;
|
||||
img.height = document.documentElement.clientHeight;
|
||||
|
|
|
@ -35,7 +35,8 @@ body {
|
|||
const pathname1 = window.location.href.substring(0, index) +
|
||||
'/resources/square100.png';
|
||||
// The images do not contain ID, so expect an empty ID.
|
||||
checkElement(entry, pathname1, 'image1', 'img1', beforeRender);
|
||||
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
|
||||
|
@ -59,7 +60,8 @@ body {
|
|||
image2Observed = 1;
|
||||
const pathname2 = window.location.href.substring(0, index) +
|
||||
'/resources/square20.png';
|
||||
checkElement(entry, pathname2, 'image2', 'img2', beforeRender);
|
||||
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);
|
||||
|
@ -72,7 +74,8 @@ body {
|
|||
image3Observed = 1;
|
||||
const pathname3 = window.location.href.substring(0, index) +
|
||||
'/resources/circle.svg';
|
||||
checkElement(entry, pathname3, 'image3', 'img3', beforeRender);
|
||||
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);
|
||||
|
|
|
@ -12,13 +12,14 @@ body {
|
|||
<div id='target'></div>
|
||||
<script>
|
||||
let beforeRender;
|
||||
let img;
|
||||
async_test(function (t) {
|
||||
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);
|
||||
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);
|
||||
|
@ -29,7 +30,7 @@ body {
|
|||
// 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 = document.createElement('img');
|
||||
img.src = 'resources/square100.png';
|
||||
img.setAttribute('elementtiming', 'my_image');
|
||||
img.setAttribute('id', 'my_id');
|
||||
|
|
|
@ -14,7 +14,8 @@ async_test(function (t) {
|
|||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index) +
|
||||
'/resources/circle.svg';
|
||||
checkElement(entry, pathname, 'my_svg', 'svg_id', beforeRender);
|
||||
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);
|
||||
|
|
|
@ -14,7 +14,8 @@ async_test(function (t) {
|
|||
const index = window.location.href.lastIndexOf('/');
|
||||
const pathname = window.location.href.substring(0, index) +
|
||||
'/resources/circle.svg';
|
||||
checkElement(entry, pathname, 'my_poster', 'the_poster', beforeRender);
|
||||
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);
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
<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;
|
||||
|
@ -24,13 +25,13 @@
|
|||
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);
|
||||
checkElement(entry, pathname, 'my_image', '', beforeRender + sleep, img);
|
||||
checkNaturalSize(entry, 20, 20);
|
||||
})
|
||||
);
|
||||
observer.observe({entryTypes: ['element']});
|
||||
|
||||
const img = document.createElement('img');
|
||||
img = document.createElement('img');
|
||||
img.src = img_src;
|
||||
img.setAttribute('elementtiming', 'my_image');
|
||||
document.body.appendChild(img);
|
||||
|
|
|
@ -12,6 +12,7 @@ body {
|
|||
<script src="resources/element-timing-helpers.js"></script>
|
||||
<script>
|
||||
let beforeRender;
|
||||
let img;
|
||||
async_test(function (t) {
|
||||
const observer = new PerformanceObserver(
|
||||
t.step_func_done(function(entryList) {
|
||||
|
@ -21,7 +22,7 @@ body {
|
|||
// Subtracting 14 to remove 'element-timing'.
|
||||
const pathname = window.location.href.substring(0, index - 14) +
|
||||
'images/black-rectangle.png';
|
||||
checkElement(entry, pathname, 'my_image', 'rectangle', beforeRender);
|
||||
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);
|
||||
|
@ -32,7 +33,7 @@ body {
|
|||
// in time for it to observe the element timing.
|
||||
window.onload = () => {
|
||||
// Add image of width equal to 100 and height equal to 50.
|
||||
const img = document.createElement('img');
|
||||
img = document.createElement('img');
|
||||
img.src = '/images/black-rectangle.png';
|
||||
img.id = 'rectangle';
|
||||
img.setAttribute('elementtiming', 'my_image');
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// Checks that this is an ElementTiming entry with name |expectedName|. It also
|
||||
// does a very basic check on |startTime|: after |beforeRender| and before now().
|
||||
function checkElement(entry, expectedName, expectedIdentifier, expectedID, beforeRender) {
|
||||
// Common checks between checkElement() and checkElementWithoutResourceTiming().
|
||||
function checkElementInternal(entry, expectedName, expectedIdentifier, expectedID, beforeRender,
|
||||
expectedElement) {
|
||||
assert_equals(entry.entryType, 'element');
|
||||
assert_equals(entry.name, expectedName);
|
||||
assert_equals(entry.identifier, expectedIdentifier);
|
||||
|
@ -8,20 +8,25 @@ function checkElement(entry, expectedName, expectedIdentifier, expectedID, befor
|
|||
assert_equals(entry.id, expectedID);
|
||||
assert_greater_than_equal(entry.startTime, beforeRender);
|
||||
assert_greater_than_equal(performance.now(), entry.startTime);
|
||||
if (expectedElement !== null)
|
||||
assert_equals(entry.element, expectedElement);
|
||||
}
|
||||
|
||||
// Checks that this is an ElementTiming entry with name |expectedName|. It also
|
||||
// does a very basic check on |startTime|: after |beforeRender| and before now().
|
||||
function checkElement(entry, expectedName, expectedIdentifier, expectedID, beforeRender,
|
||||
expectedElement) {
|
||||
checkElementInternal(entry, expectedName, expectedIdentifier, expectedID, beforeRender,
|
||||
expectedElement);
|
||||
const rt_entries = performance.getEntriesByName(expectedName, 'resource');
|
||||
assert_equals(rt_entries.length, 1);
|
||||
assert_equals(rt_entries[0].responseEnd, entry.responseEnd);
|
||||
}
|
||||
|
||||
function checkElementWithoutResourceTiming(entry, expectedName, expectedIdentifier,
|
||||
expectedID, beforeRender) {
|
||||
assert_equals(entry.entryType, 'element');
|
||||
assert_equals(entry.name, expectedName);
|
||||
assert_equals(entry.identifier, expectedIdentifier);
|
||||
assert_equals(entry.duration, 0);
|
||||
assert_equals(entry.id, expectedID);
|
||||
assert_greater_than_equal(entry.startTime, beforeRender);
|
||||
assert_greater_than_equal(performance.now(), entry.startTime);
|
||||
expectedID, beforeRender, expectedElement) {
|
||||
checkElementInternal(entry, expectedName, expectedIdentifier, expectedID, beforeRender,
|
||||
expectedElement);
|
||||
// No associated resource from ResourceTiming, so the responseEnd should be 0.
|
||||
assert_equals(entry.responseEnd, 0);
|
||||
}
|
||||
|
|
|
@ -15,6 +15,8 @@ body {
|
|||
'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']});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue