Skip to content

GitLab

T
tangled
Commit 494c8d25 authored by Nicolás Peña Moreno's avatar Nicolás Peña Moreno Committed by Commit Bot
Browse files
Options

[PaintTiming] Add more CSS image testcases 

This CL adds testcases for border image, mask image, and image replaced
content.

Bug: 1059427
Change-Id: Ib46ee51df7024273d1c3cd548ae08bc92038eafa
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2095916
Commit-Queue: Nicolás Peña Moreno <npm@chromium.org>
Reviewed-by: default avatarAnnie Sullivan <sullivan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#748836}
parent 5cfa7ad0
Hide whitespace changes
Inline Side-by-side
Showing with 98 additions and 12 deletions
third_party/blink/web_tests/external/wpt/paint-timing/border-image.html 0 → 100644
View file @ 494c8d25
<!DOCTYPE html>
<body>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/utils.js"></script>
<style>
#bordered {
width: 100px;
height: 100px;
border: 30px solid transparent;
border-image-source: url(resources/circle.svg);
border-image-width: 0px;
}
</style>
<div id='bordered'></div>
<script>
promise_test(async t => {
const onload = new Promise(r => window.addEventListener('load', r));
await onload;
return assertNoFirstContentfulPaint(t).then(() => {
document.getElementById('bordered').style.borderImageWidth = '30px';
}).then(() => {
return assertFirstContentfulPaint(t);
});
}, 'Border image triggers First Contentful Paint.');
</script>
</body>
third_party/blink/web_tests/external/wpt/paint-timing/input-text.html
View file @ 494c8d25
......@@ -7,13 +7,13 @@
<input type="text" id='myInput'>
</form>
<script>
promise_test(async () => {
promise_test(async t => {
const onload = new Promise(r => window.addEventListener('load', r));
await onload;
return assertNoFirstContentfulPaint().then(() => {
return assertNoFirstContentfulPaint(t).then(() => {
document.getElementById('myInput').value = 'default text';
return assertFirstContentfulPaint();
})
});
return assertFirstContentfulPaint(t);
});
}, 'Text from a form control triggers First Contentful Paint.');
</script>
</body>
third_party/blink/web_tests/external/wpt/paint-timing/mask-image.html 0 → 100644
View file @ 494c8d25
<!DOCTYPE html>
<body>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/utils.js"></script>
<style>
#masked {
width: 0px;
height: 100px;
-webkit-mask-image: url(resources/circle.svg);
mask-image: url(resources/circle.svg);
}
</style>
<div id='masked'></div>
<script>
promise_test(async t => {
const onload = new Promise(r => window.addEventListener('load', r));
await onload;
return assertNoFirstContentfulPaint(t).then(() => {
document.getElementById('masked').style.width = '100px';
}).then(() => {
return assertFirstContentfulPaint(t);
});
}, 'Mask image triggers First Contentful Paint.');
</script>
</body>
third_party/blink/web_tests/external/wpt/paint-timing/replaced-content-image.html 0 → 100644
View file @ 494c8d25
<!DOCTYPE html>
<body>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/utils.js"></script>
<style>
img {
content: url(resources/circle.svg);
}
</style>
<img></img>
<script>
promise_test(async t => {
const onload = new Promise(r => window.addEventListener('load', r));
await onload;
return assertFirstContentfulPaint(t);
}, 'Replaced content image triggers First Contentful Paint.');
</script>
</body>
third_party/blink/web_tests/external/wpt/paint-timing/resources/utils.js
View file @ 494c8d25
// We use requestAnimationFrame() calls to force the user agent to paint. Hence, set
// |numFramesWaiting| to 3 and use that constant whenever the test needs to wait for
// the next paint to occur.
// Number milliseconds to wait for CSS resources to load.
const numMillisecondsWait = 50;
// We use requestAnimationFrame() calls to force the user agent to paint and give enough
// time for FCP to show up in the performance timeline. Hence, set |numFramesWaiting| to
// 3 and use that constant whenever the test needs to wait for the next paint to occur.
const numFramesWaiting = 3;
function waitTime(t) {
return new Promise(resolve => t.step_timeout(resolve, numMillisecondsWait));
}
function waitForAnimationFrames(count) {
return new Promise(resolve => {
if (count-- <= 0) {
......@@ -15,8 +22,11 @@ function waitForAnimationFrames(count) {
});
}
function assertNoFirstContentfulPaint() {
return waitForAnimationFrames(numFramesWaiting).then(() => {
// Asserts that there is currently no FCP reported, even after some wait.
function assertNoFirstContentfulPaint(t) {
return waitTime(t).then(() => {
return waitForAnimationFrames(numFramesWaiting);
}).then(() => {
return new Promise((resolve, reject) => {
const observer = new PerformanceObserver(entryList =>{
const entries = entryList.getEntriesByName('first-contentful-paint');
......@@ -33,8 +43,12 @@ function assertNoFirstContentfulPaint() {
});
}
function assertFirstContentfulPaint() {
return waitForAnimationFrames(numFramesWaiting).then(() => {
// Asserts that FCP is reported, possibly after some wait. The wait is needed
// because sometimes the FCP relies on some CSS resources to finish loading.
function assertFirstContentfulPaint(t) {
return waitTime(t).then(() => {
return waitForAnimationFrames(numFramesWaiting);
}).then(() => {
return new Promise((resolve, reject) => {
const observer = new PerformanceObserver(entryList =>{
const entries = entryList.getEntriesByName('first-contentful-paint');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment