Update web-platform-tests to revision e45156b5e558c062a609356905c83a0258c516e3

This commit is contained in:
WPT Sync Bot 2019-05-02 21:47:51 -04:00
parent 9f6005be16
commit 5fcf52d946
199 changed files with 4430 additions and 530 deletions

View file

@ -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);

View file

@ -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);

View file

@ -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.

View file

@ -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.");

View file

@ -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');

View file

@ -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>

View file

@ -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');

View file

@ -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]++;

View file

@ -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);

View file

@ -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);

View file

@ -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;

View file

@ -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.');

View file

@ -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);
})

View file

@ -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.

View file

@ -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');

View file

@ -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);
}

View file

@ -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);
})

View file

@ -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');

View file

@ -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;

View file

@ -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);

View file

@ -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');

View file

@ -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);

View file

@ -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);

View file

@ -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);

View file

@ -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');

View file

@ -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);
}

View file

@ -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']});