mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1540738 [wpt PR 15936] - [ElementTiming] Mimic FCP++ rect computations, a=testonly 

Automatic update from web-platform-tests
[ElementTiming] Mimic FCP++ rect computations

This CL changes ElementTiming rect computation to use a computation
similar to that used by FCP++, but relative to the owning frame.

The tests show that the new computation seems more accurate as they
uncovered a problem with the SVG test: default SVG size is 300x150 so
it was clipping the <image> element inside.

A test for rect coordinates relative to iframe is added.

Bug: 879270, 943138
Change-Id: Ib8fa266bda76843fbf7ca07f82ac5bb245d52c4d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1531503
Reviewed-by: Liquan (Max) Gu <maxlg@chromium.org>
Reviewed-by: Mason Freed <masonfreed@chromium.org>
Reviewed-by: Chris Harrelson <chrishtr@chromium.org>
Commit-Queue: Nicolás Peña Moreno <npm@chromium.org>
Cr-Commit-Position: refs/heads/master@{#645021}

--

wpt-commits: 5570bb27d55420f0639dab2415e618afdb94a6f6
wpt-pr: 15936
This commit is contained in:
Nicolás Peña Moreno 2019-04-18 11:57:54 +00:00 коммит произвёл James Graham
Родитель cafb044023
Коммит 1eee616693
4 изменённых файлов: 83 добавлений и 1 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

33
testing/web-platform/tests/element-timing/image-clipped-svg.html Normal file
Просмотреть файл

@ -0,0 +1,33 @@
<!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) {
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/circle.svg';
checkElement(entry, pathname, 'my_svg', beforeRender);
// Image size is 200x200 but SVG size is 100x100 so it is clipped.
checkRect(entry, [0, 100, 0, 100]);
})
);
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'/>
</svg>

28
testing/web-platform/tests/element-timing/image-rect-iframe.html Normal file
Просмотреть файл

@ -0,0 +1,28 @@
<!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) => {
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);
t.done();
});
}, 'Element Timing entry in iframe has coordinates relative to the iframe.');
</script>
<iframe src="resources/iframe-with-square-sends-entry.html"/>
</body>

2
testing/web-platform/tests/element-timing/observe-svg-image.html
Просмотреть файл

@ -28,6 +28,6 @@ body {
margin: 0;
}
</style>
<svg>
<svg width="300" height="300">
<image href='resources/circle.svg' elementtiming='my_svg'/>
</svg>

21
testing/web-platform/tests/element-timing/resources/iframe-with-square-sends-entry.html Normal file
Просмотреть файл

@ -0,0 +1,21 @@
<!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,
}, '*');
});
observer.observe({entryTypes: ['element']});
</script>
<img src=square100.png elementtiming=my_image/>
</body>
</html>