diff options
Diffstat (limited to 'testing/web-platform/tests/paint-timing')
61 files changed, 2053 insertions, 0 deletions
diff --git a/testing/web-platform/tests/paint-timing/META.yml b/testing/web-platform/tests/paint-timing/META.yml new file mode 100644 index 0000000000..1892a41ed1 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/META.yml @@ -0,0 +1,3 @@ +spec: https://w3c.github.io/paint-timing/ +suggested_reviewers: + - spanicker diff --git a/testing/web-platform/tests/paint-timing/fcp-only/buffered-flag.window.js b/testing/web-platform/tests/paint-timing/fcp-only/buffered-flag.window.js new file mode 100644 index 0000000000..5910b6881f --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/buffered-flag.window.js @@ -0,0 +1,24 @@ +setup({"hide_test_state": true}); +async_test(t => { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + // First observer creates a second one in the callback to ensure the entry has been dispatched + // by the time the second observer begins observing. + new PerformanceObserver(entries => { + const entry_seen = entries.getEntriesByName('first-contentful-paint').length > 0; + // Abort if we have not yet received the entry. + if (!entry_seen) + return; + + // Second observer requires 'buffered: true' to see the entry. + new PerformanceObserver(t.step_func_done(list => { + const fcp = list.getEntriesByName('first-contentful-paint'); + assert_equals(fcp.length, 1, 'Should have an fcp entry'); + const entry = fcp[0]; + assert_equals(entry.entryType, 'paint'); + })).observe({'type': 'paint', buffered: true}); + }).observe({'entryTypes': ['paint']}); + // Trigger the first contentful paint entry. + const img = document.createElement("img"); + img.src = "../resources/circles.png"; + document.body.appendChild(img); +}, "PerformanceObserver with buffered flag sees previous FCP entry."); diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-background-size.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-background-size.html new file mode 100644 index 0000000000..25fe986bde --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-background-size.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to background size</title> +<style> + #main { + position: relative; + width: 100px; + height: 100px; + background-image: url(../resources/circles.png); + background-size: 0 0; + } + + /* contentful class is defined in test_fcp script. */ + #main.contentful { + background-size: 100% 100%; + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"></div> +<script> + // Load the image into memory first to make sure it's decoded. + function load_image() { + const img = document.createElement("img"); + img.src = "../resources/circles.png"; + + return new Promise(resolve => { + img.onload = async () => resolve(); + }); + } + + test_fcp("First contentful paint fires due to background size.", load_image); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-bg-image-set.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-bg-image-set.html new file mode 100644 index 0000000000..443cef630b --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-bg-image-set.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to background image in image-set</title> +<style> + #main { + width: 100px; + height: 100px; + } + + /* contentful class is defined in test_fcp script. */ + #main.contentful { + background-image: -webkit-image-set(url(../resources/circles.png) 1x); + background-image: image-set(url(../resources/circles.png) 1x); + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"></div> +<script> + // Load the image into memory first to make sure it's decoded. + function load_image() { + const img = document.createElement("img"); + img.src = "../resources/circles.png"; + + return new Promise(resolve => { + img.onload = async () => resolve(); + }); + } + + test_fcp("First contentful paint fires due to background image in image-set.", load_image); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-bg-image-two-steps.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-bg-image-two-steps.html new file mode 100644 index 0000000000..89b161f859 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-bg-image-two-steps.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP should fire for background image only when visible</title> +<style> + #main { + width: 100px; + height: 100px; + } + + /* contentful and preFCP classes are defined in test_fcp script. */ + #main.preFCP { + visibility: hidden; + } + + #main.contentful, #main.preFCP { + background-image: url(../resources/circles.png); + } + + #main.contentful { + visibility: visible; + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"></div> +<script> + // Load the image into memory first to make sure it's decoded. + function load_image() { + const img = document.createElement("img"); + img.src = "../resources/circles.png"; + + return new Promise(resolve => { + img.onload = async () => resolve(); + }); + } + + test_fcp("First contentful paint fires for background image only when visible.", load_image); +</script> +</body> + +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-canvas-context.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-canvas-context.html new file mode 100644 index 0000000000..726e4516ee --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-canvas-context.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP when canvas context is created</title> +</head> +<body> +<script src="../resources/utils.js"></script> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<canvas id="canvas" width="50" height="50"></canvas> +<script> + setup({"hide_test_state": true}); + promise_test(async t => { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + await new Promise(r => window.addEventListener('load', r)); + await assertNoFirstContentfulPaint(t); + const canvas = document.getElementById('canvas'); + const context = canvas.getContext('2d'); + context.fillRect(0, 0, 100, 100); + await assertFirstContentfulPaint(t); + }, 'Canvas should count as contentful when context is created'); +</script> +</body> + +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-document-opacity-image.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-document-opacity-image.html new file mode 100644 index 0000000000..e407f68708 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-document-opacity-image.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html class="hide"> +<head> +<title>Performance Paint Timing Test: Image FCP due to the documentElement's opacity</title> +<style> + html { + will-change: opacity; + } + .hide { + opacity: 0; + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"></div> +<script> +// Load the image, add it to the DOM and make sure it's decoded. +const load_image = () => { + const img = document.createElement("img"); + img.src = "../resources/circles.png"; + document.body.appendChild(img); + return img.decode(); +}; + +const change_opacity = () => { + document.documentElement.className = ""; +} + +promise_test(async t => { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + await load_image(); + await assertNoFirstContentfulPaint(t); + change_opacity(); + await waitForAnimationFrames(3); + const fcp_entries = performance.getEntriesByName('first-contentful-paint'); + assert_equals(fcp_entries.length, 1, "Got an FCP entry"); + const lcp_entries = await new Promise(resolve => {new PerformanceObserver((list) => resolve(list.getEntries())).observe({type: 'largest-contentful-paint', buffered: true})}); + assert_equals(lcp_entries.length, 1, "Got an LCP entry"); + // TODO: Rewrite this assertion after the FCP and LCP precision alignment CL is landed. Currently FCP start time has a higher precision than that of LCP. That means, even if the two are intrinsically the same, FCP.startTime will be larger as it has more fractional digits. + isLess = fcp_entries[0].startTime < lcp_entries[0].startTime; + isEqualToMicrosecond = Math.abs(fcp_entries[0].startTime - lcp_entries[0].startTime) < 0.001; + assert_true(isLess || isEqualToMicrosecond, "FCP should be smaller than FCP."); +}, "Test that FCP after opacity change is not a larger value than LCP"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-document-opacity-text.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-document-opacity-text.html new file mode 100644 index 0000000000..12384d5585 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-document-opacity-text.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html class="hide"> +<head> +<title>Performance Paint Timing Test: Text FCP due to the documentElement's opacity</title> +<style> + html { + will-change: opacity; + } + .hide { + opacity: 0; + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main">This is content that is extremely contentful.</div> +<script> +const change_opacity = () => { + document.documentElement.className = ""; +} + +promise_test(async t => { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + await assertNoFirstContentfulPaint(t); + change_opacity(); + await waitForAnimationFrames(3); + const fcp_entries = performance.getEntriesByName('first-contentful-paint'); + assert_equals(fcp_entries.length, 1, "Got an FCP entry"); + const lcp_entries = await new Promise(resolve => {new PerformanceObserver((list) => resolve(list.getEntries())).observe({type: 'largest-contentful-paint', buffered: true})}); + assert_equals(lcp_entries.length, 1, "Got an LCP entry"); + assert_less_than_equal(fcp_entries[0].startTime, lcp_entries[0].startTime, "LCP is not smaller than FCP"); +}, "Test that FCP after opacity change is not a larger value than LCP"); +</script> +</body> +</html> + + diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-ensure-update-the-rendering-step.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-ensure-update-the-rendering-step.html new file mode 100644 index 0000000000..700707de33 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-ensure-update-the-rendering-step.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<head> + <title> + Ensure the timing is marked during the `update the rendering` step. + </title> +</head> +<style> + #main { + width: 100px; + height: 100px; + left: 0px; + position: relative; + top: 0; + background-image: url(../resources/circles.png); + opacity: 0; + } + + #main.contentful { + opacity: 0.1; + } +</style> +<body> +<script src="../resources/utils.js"></script> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="main"></div> +<script> +setup({"hide_test_state": true}); +async_test(function (t) { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + let fired = false; + const main = document.getElementById('main'); + let animationFrameStamps = []; + requestAnimationFrame(function frame(stamp) { + animationFrameStamps.unshift(stamp); + main.className = "contentful"; + while (performance.now() - stamp <= 5) { + /* Busy-wait */ + } + if(!fired) + requestAnimationFrame(frame); + }); + new PerformanceObserver(t.step_func(list=>{ + for (let entry of list.getEntries()) { + if (entry.name == "first-contentful-paint") { + fired = true; + assert_any(assert_approx_equals, entry.startTime, animationFrameStamps, 1, "One of the past requestAnimationFrame should have the same timestamp as paint entry"); + t.done(); + } + } + })).observe({type: "paint"}); +}, 'The first-contentful-paint timestamp should be same as the last RAF'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-gradient.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-gradient.html new file mode 100644 index 0000000000..c1e147472f --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-gradient.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP should not fire with gradient-only backgrounds</title> +<style> + #main { + width: 100px; + height: 100px; + background-image: linear-gradient(to bottom, orange, blue); + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"></div> +<script> + setup({"hide_test_state": true}); + promise_test(async t => { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + await new Promise(r => window.addEventListener('load', r)); + await assertNoFirstContentfulPaint(t); + }, 'Gradients should not count as contentful'); +</script> +</body> + +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-iframe.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-iframe.html new file mode 100644 index 0000000000..674bcd9121 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-iframe.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<head> + <title> + Performance Paint Timing Test: Not only the top level document, paints + in the iframe should also generate the entry + </title> +</head> +<body> +<script src="../resources/utils.js"></script> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +setup({"hide_test_state": true}); +async_test(function (t) { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + window.addEventListener('message', t.step_func(e => { + if (e.data.entryType == "paint" && e.data.name == "first-contentful-paint") { + t.done(); + } + })); + const iframe = document.createElement('iframe'); + iframe.src = '../resources/subframe-painting.html'; + document.body.appendChild(iframe); +}, 'Parent frame ignores paint-timing events fired from child image rendering.'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-ignore-from-subframe.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-ignore-from-subframe.html new file mode 100644 index 0000000000..7083a93db7 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-ignore-from-subframe.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<head> + <title> + Performance Paint Timing Test: Paints in the iframe should be reported in the iframe + and not in the top document + </title> +</head> +<body> +<script src="../resources/utils.js"></script> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +setup({"hide_test_state": true}); +promise_test(async t => { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + const iframe = document.createElement('iframe'); + iframe.src = '../resources/subframe-painting.html'; + document.body.appendChild(iframe); + await new Promise(resolve => window.addEventListener('message', e => { + if (e.data.entryType == "paint" && e.data.name == "first-contentful-paint") + resolve() + })); + await assertNoFirstContentfulPaint(t); +}, 'Parent frame should not fire own paint-timing events for subframes.'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-3d-rotate-descendant.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-3d-rotate-descendant.html new file mode 100644 index 0000000000..76d459d0f4 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-3d-rotate-descendant.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to 3d revealing of descendants</title> +<style> + #main { + width: 100px; + height: 100px; + left: 0px; + position: relative; + top: 0; + transform: rotateX(45deg); + transform-style: preserve-3d; + } + + /* + This tests that given multiplication effect of 3d transforms on bounding rect, + An element counts as contentful/paintable only when its bounding rect is truly non-empty */ + #child { + transform: rotateX(45deg); + } + + /* contentful class is defined in test_fcp script. */ + #main.contentful { + transform: none; + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"> + <div id="child">Text</div> +</div> +<script> + test_fcp("First contentful paint fires due to its ancestor getting rotating into view."); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-3d-rotate.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-3d-rotate.html new file mode 100644 index 0000000000..0b7fc325c5 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-3d-rotate.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to 3d rotation into view</title> +<style> + #main { + width: 100px; + height: 100px; + left: 0px; + transform: rotateY(90deg); + position: relative; + top: 0; + } + + /* contentful class is defined in test_fcp script. */ + #main.contentful { + transform: none; + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main">Text</div> +<script> + test_fcp("First contentful paint fires due to 3d rotation into view.") +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-scale-transition.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-scale-transition.html new file mode 100644 index 0000000000..c0c0af0cdb --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-scale-transition.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP in transition</title> +<style> + #main { + width: 100px; + height: 100px; + left: 0px; + transform: scale(0); + transition: transform 1s; + position: relative; + top: 0; + } + + /* contentful class is defined in test_fcp script. */ + #main.contentful { + transform: scale(1); + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main">TEXT</div> +<script> + test_fcp("First contentful paint fires when revealed during transition."); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-scale.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-scale.html new file mode 100644 index 0000000000..4d3a060e85 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-scale.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to scale change</title> +<style> + #main { + width: 100px; + height: 100px; + left: 0px; + transform: scale(0); + position: relative; + top: 0; + background-image: url(../resources/circles.png); + } + + /* contentful class is defined in test_fcp script. */ + #main.contentful { + transform: none; + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"></div> +<script> + // Load the image into memory first to make sure it's decoded. + function load_image() { + const img = document.createElement("img"); + img.src = "../resources/circles.png"; + + return new Promise(resolve => { + img.onload = async () => resolve(); + }); + } + + test_fcp("First contentful paint fires due to scale becoming positive.", load_image) +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-text.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-text.html new file mode 100644 index 0000000000..e1b38712a6 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-text.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP should still fire for invisible text</title> +<style> + #main { + position: relative; + width: 100px; + height: 100px; + visibility: hidden; + color: rgba(0, 0, 0, 0); + } + + /* contentful class is defined in test_fcp script. */ + #main.contentful { + visibility: visible; + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"> + INVISIBLE +</div> +<script> + test_fcp("First contentful paint fires due to pseudo-element becoming visible.") +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-opacity-descendant.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-opacity-descendant.html new file mode 100644 index 0000000000..8ada49b767 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-opacity-descendant.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to ancestor opacity</title> +<style> + #main { + width: 100px; + height: 100px; + left: 0px; + position: relative; + top: 0; + } + + #child { + opacity: 0; + } + + /* contentful and intermediate classes are defined in test_fcp script. */ + #main.contentful #child { + opacity: 1; + } + + #main.intermediate #child { + opacity: 1; + } + + #main.intermediate { + opacity: 0; + } + + #main.contentful { + opacity: 0.5; + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"> + <div id="child">Text</div> +</div> +<script> + test_fcp("First contentful paint fires due to its ancestor getting positive opacity."); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-opacity.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-opacity.html new file mode 100644 index 0000000000..3c6912c4e6 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-opacity.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to opacity</title> +<style> + #main { + width: 100px; + height: 100px; + left: 0px; + position: relative; + top: 0; + background-image: url(../resources/circles.png); + opacity: 0; + } + + /* contentful class is defined in test_fcp script. */ + #main.contentful { + opacity: 0.1; + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"></div> +<script> + // Load the image into memory first to make sure it's decoded. + function load_image() { + const img = document.createElement("img"); + img.src = "../resources/circles.png"; + + return new Promise(resolve => { + img.onload = async () => resolve(); + }); + } + + test_fcp("First contentful paint fires due to opacity-revealed element.", load_image); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-out-of-bounds-translate.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-out-of-bounds-translate.html new file mode 100644 index 0000000000..ee7975eec4 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-out-of-bounds-translate.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to transform-based intersection with document</title> +<style> + #main { + width: 100px; + height: 100px; + left: 0px; + transform: translate(-1000px); + position: relative; + top: 0; + background-image: url(../resources/circles.png); + } + + /* contentful class is defined in test_fcp script. */ + #main.contentful { + transform: none; + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"></div> +<script> + test_fcp("First contentful paint fires due to transform-based intersection with document.") +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-out-of-bounds.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-out-of-bounds.html new file mode 100644 index 0000000000..91556e50e0 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-out-of-bounds.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to intersection with document</title> +<style> + #main { + width: 100px; + height: 100px; + left: -1000px; + position: relative; + top: 0; + background-image: url(../resources/circles.png); + } + + /* contentful class is defined in test_fcp script. */ + #main.contentful { + left: 0px; + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"></div> +<script> + // Load the image into memory first to make sure it's decoded. + function load_image() { + const img = document.createElement("img"); + img.src = "../resources/circles.png"; + + return new Promise(resolve => { + img.onload = async () => resolve(); + }); + } + + test_fcp("First contentful paint fires due to intersection with document.", load_image) +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-display.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-display.html new file mode 100644 index 0000000000..50fd626e89 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-display.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to pseudo-element text</title> +<style> + #main { + position: relative; + width: 100px; + height: 100px; + } + + #main:after { + content: "TEXT"; + display: none; + } + + /* contentful class is defined in test_fcp script. */ + #main.contentful:after { + display: block; + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"> +</div> +<script> + test_fcp("First contentful paint fires due to pseudo-element text.") +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-image.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-image.html new file mode 100644 index 0000000000..d67ae21cd9 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-image.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to pseudo-element image</title> +<style> + #main { + position: relative; + width: 100px; + height: 100px; + } + + /* contentful class is defined in test_fcp script. */ + #main.contentful:after { + content: url(../resources/circles.png); + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"> +</div> +<script> + // Load the image into memory first to make sure it's decoded. + function load_image() { + const img = document.createElement("img"); + img.src = "../resources/circles.png"; + + return new Promise(resolve => { + img.onload = async () => resolve(); + }); + } + + test_fcp("First contentful paint fires due to pseudo-element image.", load_image) +</script> +</body> + +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-opacity.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-opacity.html new file mode 100644 index 0000000000..b209864d5d --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-opacity.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to pseudo-element getting positive opacity</title> +<style> + #main { + position: relative; + width: 100px; + height: 100px; + } + + #main:after { + content: "TEXT"; + opacity: 0; + } + + /* contentful class is defined in test_fcp script. */ + #main.contentful:after { + opacity: 0.5; + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"> +</div> +<script> + test_fcp("First contentful paint fires due to pseudo-element getting positive opacity.") +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-text.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-text.html new file mode 100644 index 0000000000..ea2105e453 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-text.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to pseudo-element text</title> +<style> + #main { + position: relative; + width: 100px; + height: 100px; + } + + /* contentful class is defined in test_fcp script. */ + #main.contentful:after { + content: "TEXT" + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"> +</div> +<script> + test_fcp("First contentful paint fires due to pseudo-element text.") +</script> +</body> + +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-visibility.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-visibility.html new file mode 100644 index 0000000000..c903c47218 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-visibility.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to pseudo-element becoming visible</title> +<style> + #main { + position: relative; + width: 100px; + height: 100px; + } + + #main:after { + content: "TEXT"; + visibility: hidden; + } + + /* contentful class is defined in test_fcp script. */ + #main.contentful:after { + visibility: visible; + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"> +</div> +<script> + test_fcp("First contentful paint fires due to pseudo-element becoming visible.") +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-svg.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-svg.html new file mode 100644 index 0000000000..bcd2372cfc --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-svg.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP with SVG</title> +<style> + #main { + width: 100px; + height: 100px; + left: 0px; + position: relative; + } + + #circle { + display: none; + } + + /* contentful class is defined in test_fcp script. */ + #main.contentful #circle { + display: block; + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"> + <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/> + </defs> + <use id="circle" href="#myCircle" fill="green" /> + </svg> +</div> +<script> + test_fcp("First contentful paint fires when SVG becomes contentful.") +</script> +</body> + +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-text-input.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-text-input.html new file mode 100644 index 0000000000..e50449abbe --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-text-input.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due for non-empty text input</title> +</head> +<body> +<script src="../resources/utils.js"></script> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<input id="input" type="text" /> +<script> + setup({"hide_test_state": true}); + promise_test(async t => { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + await new Promise(r => window.addEventListener('load', r)); + await assertNoFirstContentfulPaint(t); + const input = document.getElementById('input'); + input.setAttribute('value', ' '); + await assertNoFirstContentfulPaint(t); + input.setAttribute('value', 'value'); + await assertFirstContentfulPaint(t); + }, 'Text input should become contentful when its value is non-empty'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-typographic-pseudo.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-typographic-pseudo.html new file mode 100644 index 0000000000..5ec62b7d59 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-typographic-pseudo.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP should not fire when all text is hidden due to typographic pseudo-elements</title> +<style> + #main { + position: relative; + width: 100px; + height: 100px; + } + + #main *::first-letter { + opacity: 0; + } + + /* contentful class is defined in test_fcp script. */ + #main.contentful *::first-letter { + opacity: 1; + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"> + <div>A</div> +</div> +<script> + test_fcp("First contentful paint fires only when some of the text is visible, considering ::first-letter.") +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-video-frame.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-video-frame.html new file mode 100644 index 0000000000..c54648f001 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-video-frame.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to loaded video frame</title> +</head> +<body> +<script src="../resources/utils.js"></script> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/media.js"></script> +<video id="video" autoplay></video> +<script> + setup({"hide_test_state": true}); + promise_test(async t => { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + await new Promise(r => window.addEventListener('load', r)); + await assertNoFirstContentfulPaint(t); + // Set actual video content to trigger FCP. + const video = document.getElementById('video'); + video.src = getVideoURI('/media/test'); + await new Promise(resolve => { + video.oncanplay = resolve; + }); + await assertFirstContentfulPaint(t); + }, 'Video should become contentful when first frame is loaded'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-video-poster.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-video-poster.html new file mode 100644 index 0000000000..e7eeee3f12 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-video-poster.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to loaded video poster</title> +</head> +<body> +<script src="../resources/utils.js"></script> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<video id="video" width="50" height="50"></video> +<script> + setup({"hide_test_state": true}); + promise_test(async t => { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + await new Promise(r => window.addEventListener('load', r)); + await assertNoFirstContentfulPaint(t); + const video = document.getElementById('video'); + const src = '../resources/circles.png'; + const image = new Image(); + image.src = src; + video.setAttribute('poster', src); + await new Promise(resolve => { + image.onload = async () => resolve(); + }) + await assertFirstContentfulPaint(t); + }, 'Video should become contentful when poster is loaded'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-whitespace.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-whitespace.html new file mode 100644 index 0000000000..71c72b018a --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-whitespace.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: Whitespace should not count as contentful</title> +<style> + #main { + position: relative; + width: 100px; + height: 100px; + background-image: url(../resources/circles.png); + background-size: 0 0; + } + + #text { + display: none; + } + + /* contentful class is defined in test_fcp script. */ + #main.contentful #text{ + display: block; + } +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="main"> + <div id="whitespace"> </div> + <div id="text">TEXT</div> +</div> +<script> + // Load the image into memory first to make sure it's decoded. + function load_image() { + const img = document.createElement("img"); + img.src = "../resources/circles.png"; + + return new Promise(resolve => { + img.onload = async () => resolve(); + }); + } + + test_fcp("Whitespace should not count as contentful.", load_image) +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-with-rtl.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-with-rtl.html new file mode 100644 index 0000000000..5541fcbc72 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/fcp-with-rtl.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to direction change</title> +<style> + #text { + right: -100px; + position: absolute; + } + + body { + direction: rtl; + } +</style> +</head> +<body> +<script src="../resources/utils.js"></script> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="text">TEXT</div> +<script> + setup({"hide_test_state": true}); + promise_test(async t => { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + await new Promise(r => window.addEventListener('load', r)); + await assertNoFirstContentfulPaint(t); + document.body.style.direction = 'ltr' + await assertFirstContentfulPaint(t); + }, 'FCP should fire when coordinates are negative, if within document scrollable area'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/fcp-only/svg-in-iframe.html b/testing/web-platform/tests/paint-timing/fcp-only/svg-in-iframe.html new file mode 100644 index 0000000000..230c166cb0 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/fcp-only/svg-in-iframe.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Performance Paint Timing Test: SVG in iframe does not trigger FCP</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<iframe src="../resources/svg.html"></iframe> +<script> + promise_test(async (t) => { + await new Promise(resolve => { + window.addEventListener("message", resolve); + }); + return assertNoFirstContentfulPaint(t); + }, "SVG in an iframe does not trigger FCP in the main frame"); +</script> diff --git a/testing/web-platform/tests/paint-timing/first-contentful-canvas-none.html b/testing/web-platform/tests/paint-timing/first-contentful-canvas-none.html new file mode 100644 index 0000000000..33a4352126 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/first-contentful-canvas-none.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> + +<head> + <title>Performance Paint Timing Test: FCP due to canvas</title> +</head> + +<body> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="resources/utils.js"></script> + <canvas id="canvas" width="200" height="200"></canvas> + + <script> + setup({"hide_test_state": true}); + promise_test(async t => { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + await new Promise(r => window.addEventListener('load', r)); + await assertNoFirstContentfulPaint(t); + }, 'First contentful paint should not fire for canvas type none'); + </script> +</body> + +</html> diff --git a/testing/web-platform/tests/paint-timing/idlharness.window.js b/testing/web-platform/tests/paint-timing/idlharness.window.js new file mode 100644 index 0000000000..049f0f18f1 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/idlharness.window.js @@ -0,0 +1,31 @@ +// META: script=/resources/WebIDLParser.js +// META: script=/resources/idlharness.js + +'use strict'; + +// https://w3c.github.io/paint-timing/ + +idl_test( + ['paint-timing'], + ['performance-timeline'], + (idl_array, t) => { + idl_array.add_objects({ + PerformancePaintTiming: ['paintTiming'], + }); + + const awaitPaint = new Promise(resolve => { + let observer = new PerformanceObserver(list => { + self.paintTiming = list.getEntries()[0]; + resolve(); + }); + observer.observe({ entryTypes: ['paint'] }); + const div = document.createElement('div'); + div.innerHTML = 'Hello World'; + document.body.appendChild(div); + }); + const timeout = new Promise((_, reject) => { + t.step_timeout(() => reject('Timed out waiting for paint event'), 3000); + }); + return Promise.race([awaitPaint, timeout]); + } +); diff --git a/testing/web-platform/tests/paint-timing/input-text.html b/testing/web-platform/tests/paint-timing/input-text.html new file mode 100644 index 0000000000..da1e0e8376 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/input-text.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/utils.js"></script> +<form> + <input type="text" id='myInput'> +</form> +<script> +setup({"hide_test_state": true}); +promise_test(async t => { + const onload = new Promise(r => window.addEventListener('load', r)); + await onload; + return assertNoFirstContentfulPaint(t).then(() => { + document.getElementById('myInput').value = 'default text'; + return assertFirstContentfulPaint(t); + }); +}, 'Text from a form control triggers First Contentful Paint.'); +</script> +</body> diff --git a/testing/web-platform/tests/paint-timing/replaced-content-image.html b/testing/web-platform/tests/paint-timing/replaced-content-image.html new file mode 100644 index 0000000000..b3199aa0f6 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/replaced-content-image.html @@ -0,0 +1,20 @@ +<!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> +setup({"hide_test_state": true}); +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> diff --git a/testing/web-platform/tests/paint-timing/resources/circle.svg b/testing/web-platform/tests/paint-timing/resources/circle.svg new file mode 100644 index 0000000000..6b5fdbe8e0 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/resources/circle.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="none" /> +</svg> diff --git a/testing/web-platform/tests/paint-timing/resources/circles.png b/testing/web-platform/tests/paint-timing/resources/circles.png Binary files differnew file mode 100644 index 0000000000..708682a207 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/resources/circles.png diff --git a/testing/web-platform/tests/paint-timing/resources/subframe-painting.html b/testing/web-platform/tests/paint-timing/resources/subframe-painting.html new file mode 100644 index 0000000000..00fd39bcb8 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/resources/subframe-painting.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<body> +<div id="image"></div> +<script> + const img = document.createElement('IMG'); + img.src = 'circles.png'; + + var observer = new PerformanceObserver(function(list, obj) { + var paintEntries = list.getEntries(); + for (let i = 0; i < paintEntries.length; i++) { + // postMessage doesn't allow sending the entry object over directly + var dataToSend = { + "entryType": paintEntries[i]["entryType"], + "name": paintEntries[i]["name"] + }; + parent.postMessage(dataToSend, '*'); + } + }); + + observer.observe({"type": "paint"}); + document.getElementById('image').appendChild(img); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/resources/subframe-sending-paint.html b/testing/web-platform/tests/paint-timing/resources/subframe-sending-paint.html new file mode 100644 index 0000000000..f372bd6f4f --- /dev/null +++ b/testing/web-platform/tests/paint-timing/resources/subframe-sending-paint.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<script> + self.addEventListener('message', function(e) { + // Send paint-timing entries upon receiving a message. + const paintEntries = performance.getEntriesByType('paint'); + let entryContents = paintEntries.length + ''; + for (let i = 0; i < paintEntries.length; i++) { + const entry = paintEntries[i]; + entryContents += ' ' + entry.entryType + ' ' + entry.name; + } + parent.postMessage(entryContents, '*'); + }); +</script> diff --git a/testing/web-platform/tests/paint-timing/resources/svg.html b/testing/web-platform/tests/paint-timing/resources/svg.html new file mode 100644 index 0000000000..94185eab34 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/resources/svg.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<div id="main"> + <svg viewBox="0 0 10 10"> + <defs> + <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue" /> + </defs> + <use id="circle" href="#myCircle" fill="green" /> + </svg> +</div> +<script> + const observer = new PerformanceObserver(list => { + const fcp = list.getEntriesByName("first-contentful-paint"); + if (!fcp.length) + return; + + // Message the parent when FCP has been reached. + parent.postMessage("GotFCP", '*'); + }); + observer.observe({ type: "paint", buffered: true }); +</script> diff --git a/testing/web-platform/tests/paint-timing/resources/utils.js b/testing/web-platform/tests/paint-timing/resources/utils.js new file mode 100644 index 0000000000..5766971dd0 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/resources/utils.js @@ -0,0 +1,52 @@ +function waitForAnimationFrames(count) { + return new Promise(resolve => { + if (count-- <= 0) { + resolve(); + } else { + requestAnimationFrame(() => { + waitForAnimationFrames(count).then(resolve); + }); + } + }); +} + +// Asserts that there is currently no FCP reported. Pass t to add some wait, in case CSS is loaded +// and FCP is incorrectly fired afterwards. +async function assertNoFirstContentfulPaint(t) { + await waitForAnimationFrames(3); + assert_equals(performance.getEntriesByName('first-contentful-paint').length, 0, 'First contentful paint marked too early. '); +} + +// Function that is resolved once FCP is reported, using PerformanceObserver. It rejects after a long +// wait time so that failing tests don't timeout. +async function assertFirstContentfulPaint(t) { + return new Promise(resolve => { + function checkFCP() { + if (performance.getEntriesByName('first-contentful-paint').length === 1) { + resolve(); + } else { + t.step_timeout(checkFCP, 0); + } + } + t.step(checkFCP); + }); +} + +async function test_fcp(label, before_assert_fcp_func) { + setup({"hide_test_state": true}); + const style = document.createElement('style'); + document.head.appendChild(style); + await promise_test(async t => { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + const main = document.getElementById('main'); + await new Promise(r => window.addEventListener('load', r)); + await assertNoFirstContentfulPaint(t); + main.className = 'preFCP'; + await assertNoFirstContentfulPaint(t); + if (before_assert_fcp_func) { + await before_assert_fcp_func(); + } + main.className = 'contentful'; + await assertFirstContentfulPaint(t); + }, label); +} diff --git a/testing/web-platform/tests/paint-timing/supported-paint-type.window.js b/testing/web-platform/tests/paint-timing/supported-paint-type.window.js new file mode 100644 index 0000000000..518faff5cf --- /dev/null +++ b/testing/web-platform/tests/paint-timing/supported-paint-type.window.js @@ -0,0 +1,22 @@ +test(() => { + assert_implements(typeof PerformanceObserver.supportedEntryTypes !== "undefined", 'supportedEntryTypes is not supported'); + assert_true(PerformanceObserver.supportedEntryTypes.includes("paint"), + "There should be an entry 'paint' in PerformanceObserver.supportedEntryTypes"); +}, "supportedEntryTypes contains 'paint'."); + +const entryType = 'paint'; +promise_test(async() => { + assert_implements(typeof PerformanceObserver.supportedEntryTypes !== "undefined", 'supportedEntryTypes is not supported'); + assert_implements(typeof PerformanceObserver.supportedEntryTypes.includes(entryType), `supportedEntryTypes does not include '${entryType}'`); + await new Promise((resolve) => { + new PerformanceObserver(function (list, observer) { + observer.disconnect(); + resolve(); + }).observe({entryTypes: [entryType]}); + + // Force the PerformanceEntry. + // Use `self` for Workers. + if (self.document) + document.head.parentNode.appendChild(document.createTextNode('foo')); + }) +}, `'${entryType}' entries should be observable.`) diff --git a/testing/web-platform/tests/paint-timing/with-first-paint/basetest.html b/testing/web-platform/tests/paint-timing/with-first-paint/basetest.html new file mode 100644 index 0000000000..759dfaa97a --- /dev/null +++ b/testing/web-platform/tests/paint-timing/with-first-paint/basetest.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test</title> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="main"></div> + +<script> +setup({"hide_test_state": true}); +async_test(function(t) { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + t.step(function() { + const bufferedEntries = performance.getEntriesByType('paint'); + assert_equals(bufferedEntries.length, 0, "No paint entries yet"); + }); + const div = document.createElement("div"); + div.style.width = "100px"; + div.style.height = "100px"; + div.style.backgroundColor = "red"; + div.style.color = "blue"; + div.innerHTML = "test" + document.getElementById("main").appendChild(div); + function testPaintEntries() { + const bufferedEntries = performance.getEntriesByType('paint'); + if (bufferedEntries.length < 2) { + t.step_timeout(function() { + testPaintEntries(); + }, 20); + return; + } + t.step(function() { + assert_equals(bufferedEntries.length, 2, "FP and FCP."); + assert_equals(bufferedEntries[0].entryType, "paint"); + assert_equals(bufferedEntries[0].name, "first-paint"); + assert_equals(bufferedEntries[1].entryType, "paint"); + assert_equals(bufferedEntries[1].name, "first-contentful-paint"); + t.done(); + }); + } + t.step(function() { + testPaintEntries(); + }); +}, "Basic test to check existence of FP and FCP."); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/with-first-paint/border-image.html b/testing/web-platform/tests/paint-timing/with-first-paint/border-image.html new file mode 100644 index 0000000000..4abccfe8e8 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/with-first-paint/border-image.html @@ -0,0 +1,28 @@ +<!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> +setup({"hide_test_state": true}); +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> diff --git a/testing/web-platform/tests/paint-timing/with-first-paint/buffered-flag.window.js b/testing/web-platform/tests/paint-timing/with-first-paint/buffered-flag.window.js new file mode 100644 index 0000000000..0b7c8bea2e --- /dev/null +++ b/testing/web-platform/tests/paint-timing/with-first-paint/buffered-flag.window.js @@ -0,0 +1,36 @@ +setup({"hide_test_state": true}); +async_test(t => { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + // First observer creates second in callback to ensure the entry has been dispatched by the time + // the second observer begins observing. + let entries_seen = 0; + new PerformanceObserver(firstList => { + entries_seen += firstList.getEntries().length; + // Abort if we have not yet received both paint entries. + if (entries_seen < 2) + return; + + // Second observer requires 'buffered: true' to see the entries. + let firstPaintSeen = false; + let firstContentfulPaintSeen = false; + new PerformanceObserver(list => { + list.getEntries().forEach(t.step_func(entry => { + assert_equals(entry.entryType, 'paint'); + if (entry.name === 'first-paint') + firstPaintSeen = true; + else if (entry.name === 'first-contentful-paint') + firstContentfulPaintSeen = true; + else + assert_unreached('The observer should only see first paint or first contentful paint!'); + + if (firstPaintSeen && firstContentfulPaintSeen) + t.done(); + })); + }).observe({'type': 'paint', buffered: true}); + }).observe({'entryTypes': ['paint']}); + + // Trigger the first paint entries + const img = document.createElement("IMG"); + img.src = "resources/circles.png"; + document.body.appendChild(img); +}, "PerformanceObserver with buffered flag sees previous paint entries."); diff --git a/testing/web-platform/tests/paint-timing/with-first-paint/child-painting-first-image.html b/testing/web-platform/tests/paint-timing/with-first-paint/child-painting-first-image.html new file mode 100644 index 0000000000..92a926a2b9 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/with-first-paint/child-painting-first-image.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<script> +var entriesExpectToReceive = [ + { + 'entryType': 'paint', + 'name': 'first-paint' + }, + { + 'entryType': 'paint', + 'name': 'first-contentful-paint' + } +]; + +setup({"hide_test_state": true}); +async_test(function (t) { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + window.addEventListener('message', t.step_func(e => { + // When only child frame paints, expect only first-paint. + for (let i = 0; i < entriesExpectToReceive.length; i++) { + if (entriesExpectToReceive[i].entryType == e.data.entryType && + entriesExpectToReceive[i].name == e.data.name) { + entriesExpectToReceive.splice(i, 1); + break; + } + } + + if (entriesExpectToReceive.length == 0) { + const bufferedEntries = performance.getEntriesByType('paint'); + assert_equals(bufferedEntries.length, 1); + assert_equals(bufferedEntries[0].entryType, 'paint'); + assert_equals(bufferedEntries[0].name, 'first-paint'); + t.done(); + } + })); + const iframe = document.createElement('iframe'); + iframe.id = 'child-iframe'; + iframe.src = '../resources/subframe-painting.html'; + document.body.appendChild(iframe); +}, 'Parent frame ignores paint-timing events fired from child image rendering.'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-bg-image.html b/testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-bg-image.html new file mode 100644 index 0000000000..40eaa635bb --- /dev/null +++ b/testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-bg-image.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to background image</title> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="main"></div> +</body> + +<footer> +<script> +setup({"hide_test_state": true}); +async_test(function (t) { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + const body = document.getElementsByTagName('body')[0]; + body.style.backgroundImage = 'url(../resources/circles.png)'; + window.onload = function() { + function testPaintEntries() { + const bufferedEntries = performance.getEntriesByType('paint'); + if (bufferedEntries.length < 2) { + t.step_timeout(function() { + testPaintEntries(); + }, 20); + return; + } + t.step(function() { + assert_equals(bufferedEntries.length, 2, "There should be two paint timing instances."); + assert_equals(bufferedEntries[0].entryType, "paint"); + assert_equals(bufferedEntries[0].name, "first-paint"); + assert_equals(bufferedEntries[1].entryType, "paint"); + assert_equals(bufferedEntries[1].name, "first-contentful-paint"); + t.done(); + }); + } + t.step(function() { + testPaintEntries(); + }); + }; +}, "First contentful paint fires due to background image render."); +</script> +<footer> +</html> diff --git a/testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-canvas-webgl2.html b/testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-canvas-webgl2.html new file mode 100644 index 0000000000..f7c5f50ecb --- /dev/null +++ b/testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-canvas-webgl2.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> + +<head> + <title>Performance Paint Timing Test: FCP due to canvas</title> +</head> + +<body> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <canvas id="canvas" width="200" height="200"></canvas> + + <script> + setup({ "hide_test_state": true }); + async_test(function (t) { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + const canvas = document.getElementById("canvas"); + const context = canvas.getContext("webgl2"); + if (!context) { + assert_implements_optional(context, "WebGL 2 Canvas isn't supported.") + } + context.clearColor(0.3, 0.3, 0.3, 1); + context.clear(context.COLOR_BUFFER_BIT); + function testPaintEntries() { + const bufferedEntries = performance.getEntriesByType('paint'); + if (bufferedEntries.length < 2) { + t.step_timeout(function () { + testPaintEntries(); + }, 20); + return; + } + t.step(function () { + assert_equals(bufferedEntries.length, 2, "There should be two paint timing instances."); + assert_equals(bufferedEntries[0].entryType, "paint"); + assert_equals(bufferedEntries[0].name, "first-paint"); + assert_equals(bufferedEntries[1].entryType, "paint"); + assert_equals(bufferedEntries[1].name, "first-contentful-paint"); + t.done(); + }); + }; + t.step(function () { + testPaintEntries(); + }); + }, "First contentful paint fires due to webgl2 canvas render."); + </script> +</body> + +</html> diff --git a/testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-canvas.html b/testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-canvas.html new file mode 100644 index 0000000000..e6a4365b76 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-canvas.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to canvas</title> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<canvas id="canvas" width="200" height="200" ></canvas> + +<script> +setup({"hide_test_state": true}); +async_test(function (t) { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + const canvas = document.getElementById("canvas"); + const context = canvas.getContext("2d"); + context.beginPath(); + context.moveTo(0,0); + context.lineTo(300,150); + context.stroke(); + function testPaintEntries() { + const bufferedEntries = performance.getEntriesByType('paint'); + if (bufferedEntries.length < 2) { + t.step_timeout(function() { + testPaintEntries(); + }, 20); + return; + } + t.step(function() { + assert_equals(bufferedEntries.length, 2, "There should be two paint timing instances."); + assert_equals(bufferedEntries[0].entryType, "paint"); + assert_equals(bufferedEntries[0].name, "first-paint"); + assert_equals(bufferedEntries[1].entryType, "paint"); + assert_equals(bufferedEntries[1].name, "first-contentful-paint"); + t.done(); + }); + }; + t.step(function() { + testPaintEntries(); + }); +}, "First contentful paint fires due to canvas render."); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-image.html b/testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-image.html new file mode 100644 index 0000000000..504a07dd43 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-image.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to image</title> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="image"></div> + +<script> +setup({"hide_test_state": true}); +async_test(function (t) { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + const img = document.createElement("IMG"); + img.src = "../resources/circles.png"; + img.onload = function() { + function testPaintEntries() { + const bufferedEntries = performance.getEntriesByType('paint'); + if (bufferedEntries.length < 2) { + t.step_timeout(function() { + testPaintEntries(); + }, 20); + return; + } + t.step(function() { + assert_equals(bufferedEntries.length, 2, "There should be two paint timing instances."); + assert_equals(bufferedEntries[0].entryType, "paint"); + assert_equals(bufferedEntries[0].name, "first-paint"); + assert_equals(bufferedEntries[1].entryType, "paint"); + assert_equals(bufferedEntries[1].name, "first-contentful-paint"); + t.done(); + }) + } + t.step(function() { + testPaintEntries(); + }); + }; + document.getElementById('image').appendChild(img); +}, "First contentful paint fires due to image render."); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-paint.html b/testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-paint.html new file mode 100644 index 0000000000..7d23155b0d --- /dev/null +++ b/testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-paint.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FP followed by FCP</title> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="main"></div> +<div id="image"></div> + +<script> +setup({"hide_test_state": true}); +async_test(function (t) { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + const bufferedEntries = performance.getEntriesByType('paint'); + assert_equals(bufferedEntries.length, 0, "No paint entries yet"); + const div = document.createElement("div"); + div.style.width = "100px"; + div.style.height = "100px"; + div.style.backgroundColor = "red"; + div.style.color = "blue"; + document.getElementById("main").appendChild(div); + function testPaintEntries() { + const bufferedEntries = performance.getEntriesByType('paint'); + if (bufferedEntries.length < 1) { + t.step_timeout(function() { + testPaintEntries(); + }, 20); + return; + } + t.step(function() { + assert_equals(bufferedEntries.length, 1, "FP only."); + assert_equals(bufferedEntries[0].entryType, "paint"); + assert_equals(bufferedEntries[0].name, "first-paint"); + }); + const img = document.createElement("IMG"); + img.src = "../resources/circles.png"; + img.onload = function() { + function secondTestPaintEntries() { + const moreBufferedEntries = performance.getEntriesByType('paint'); + if (moreBufferedEntries.length < 2) { + t.step_timeout(function() { + secondTestPaintEntries(); + }, 20); + return; + } + t.step(function() { + assert_equals(moreBufferedEntries.length, 2, "FP and FCP."); + assert_equals(moreBufferedEntries[0].entryType, "paint"); + assert_equals(moreBufferedEntries[0].name, "first-paint"); + const fpEntriesGotByName = + performance.getEntriesByName('first-paint'); + assert_equals(fpEntriesGotByName.length, 1); + assert_equals(moreBufferedEntries[0], fpEntriesGotByName[0]); + assert_equals(moreBufferedEntries[1].entryType, "paint"); + assert_equals(moreBufferedEntries[1].name, "first-contentful-paint"); + const fcpEntriesGotByName = + performance.getEntriesByName('first-contentful-paint'); + assert_equals(fcpEntriesGotByName.length, 1); + assert_equals(moreBufferedEntries[1], fcpEntriesGotByName[0]); + t.done(); + }); + } + t.step(function() { + secondTestPaintEntries(); + }); + }; + document.getElementById('image').appendChild(img); + } + t.step(function() { + testPaintEntries(); + }); +}, "First Paint triggered by non-contentful paint. Image load triggers First Contentful Paint."); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-svg.html b/testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-svg.html new file mode 100644 index 0000000000..74799a2ecd --- /dev/null +++ b/testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-svg.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FCP due to SVG</title> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="svg"></div> + +<script> +setup({"hide_test_state": true}); +async_test(function (t) { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + const img = document.createElement("IMG"); + img.src = "../resources/circle.svg"; + img.onload = function() { + function testPaintEntries() { + const bufferedEntries = performance.getEntriesByType('paint'); + if (bufferedEntries.length < 2) { + t.step_timeout(function() { + testPaintEntries(); + }, 20); + return; + } + t.step(function() { + assert_equals(bufferedEntries.length, 2, "There should be two paint timing instances."); + assert_equals(bufferedEntries[0].entryType, "paint"); + assert_equals(bufferedEntries[0].name, "first-paint"); + assert_equals(bufferedEntries[1].entryType, "paint"); + assert_equals(bufferedEntries[1].name, "first-contentful-paint"); + t.done(); + }); + } + t.step(function() { + testPaintEntries(); + }); + }; + document.getElementById('svg').appendChild(img); +}, "First contentful paint fires due to svg."); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/with-first-paint/first-image-child.html b/testing/web-platform/tests/paint-timing/with-first-paint/first-image-child.html new file mode 100644 index 0000000000..5c24527cf5 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/with-first-paint/first-image-child.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: child ignores parent FCP</title> +<meta name="timeout" content="long"> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<iframe src='../resources/subframe-sending-paint.html' id='child-iframe'></iframe> +<img src='../resources/circles.png'/> +<script> +setup({"hide_test_state": true}); +async_test(function (t) { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + + window.addEventListener('message', t.step_func(e => { + // Child iframe should not have any paint-timing entries. + assert_equals(e.data, '0'); + t.done(); + })); + // Wait for onload to ensure img and iframe have loaded. + window.addEventListener('load', function() { + function testPaintEntries() { + const bufferedEntries = performance.getEntriesByType('paint'); + if (bufferedEntries.length < 2) { + t.step_timeout(testPaintEntries, 20); + return; + } + t.step(function() { + assert_equals(bufferedEntries.length, 2, 'There should be two paint timing instances.'); + assert_equals(bufferedEntries[0].entryType, 'paint'); + assert_equals(bufferedEntries[0].name, 'first-paint'); + assert_equals(bufferedEntries[1].entryType, 'paint'); + assert_equals(bufferedEntries[1].name, 'first-contentful-paint'); + // Ask child iframe to send its paint-timing entries. + document.getElementById('child-iframe'). + contentWindow.postMessage('', '*'); + }) + } + testPaintEntries(); + }); +}, 'Child iframe ignores paint-timing events fired from parent image rendering.'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/with-first-paint/first-paint-bg-color.html b/testing/web-platform/tests/paint-timing/with-first-paint/first-paint-bg-color.html new file mode 100644 index 0000000000..a4f799045f --- /dev/null +++ b/testing/web-platform/tests/paint-timing/with-first-paint/first-paint-bg-color.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FP due to background color</title> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="main"></div> +</body> + +<footer> +<script> +setup({"hide_test_state": true}); +async_test(function (t) { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + document.body.style.backgroundColor = "#AA0000"; + + function testPaintEntries() { + const bufferedEntries = performance.getEntriesByType('paint'); + if (bufferedEntries.length < 1) { + t.step_timeout(function() { + testPaintEntries(); + }, 20); + return; + } + t.step(function() { + assert_equals(bufferedEntries.length, 1, "FP should fire for background color, not FCP"); + assert_equals(bufferedEntries[0].entryType, "paint"); + assert_equals(bufferedEntries[0].name, "first-paint"); + t.done(); + }); + } + t.step(function() { + testPaintEntries(); + }) +}, "First paint fires due to background color. No FCP"); +</script> +<footer> +</html> diff --git a/testing/web-platform/tests/paint-timing/with-first-paint/first-paint-only.html b/testing/web-platform/tests/paint-timing/with-first-paint/first-paint-only.html new file mode 100644 index 0000000000..473b1aa121 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/with-first-paint/first-paint-only.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<head> +<title>Performance Paint Timing Test: FP only</title> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="main"></div> + +<script> +setup({"hide_test_state": true}); +async_test(function (t) { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + const div = document.createElement("div"); + div.style.width = "100px"; + div.style.height = "100px"; + div.style.backgroundColor = "red"; + div.style.color = "blue"; + document.getElementById("main").appendChild(div); + + function testPaintEntries() { + const bufferedEntries = performance.getEntriesByType('paint'); + if (bufferedEntries.length < 1) { + t.step_timeout(function() { + testPaintEntries(); + }, 20); + return; + } + t.step(function() { + assert_equals(bufferedEntries.length, 1, "FP only."); + assert_equals(bufferedEntries[0].entryType, "paint"); + assert_equals(bufferedEntries[0].name, "first-paint"); + t.done(); + }); + } + t.step(function() { + testPaintEntries(); + }) +}, "Performance first paint timing entry exists. No first contentful paint."); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/paint-timing/with-first-paint/mask-image.html b/testing/web-platform/tests/paint-timing/with-first-paint/mask-image.html new file mode 100644 index 0000000000..e69e562d10 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/with-first-paint/mask-image.html @@ -0,0 +1,27 @@ +<!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> +setup({"hide_test_state": true}); +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> diff --git a/testing/web-platform/tests/paint-timing/with-first-paint/paint-visited.html b/testing/web-platform/tests/paint-timing/with-first-paint/paint-visited.html new file mode 100644 index 0000000000..c02ea24052 --- /dev/null +++ b/testing/web-platform/tests/paint-timing/with-first-paint/paint-visited.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<style> + a:visited { + color:white; + } +</style> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<a id="link" href="./">link</a> +<script> +/* This test ensures that an empty page is painted when there is an invisible visited link (that +would be visible if the link was not visited). It's necessary that whether the page is painted or +not does not depend on visitedness of the link. Otherwise the paint-timing API could be used to +sniff whether a link has been visited or not. */ +window.onload = function() { + /* Convenience helper to get the link into the browsing history. + Using a relative path because some browsers only allow replaceState within the same domain. */ + current_url = window.location.href; + history.replaceState({}, "", "./"); + history.replaceState({}, "", current_url); +} +setup({"hide_test_state": true}); +async_test(function(t) { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + function testPaintEntries() { + const bufferedEntries = performance.getEntriesByType('paint'); + if (bufferedEntries.length < 2) { + t.step_timeout(function() { + testPaintEntries(); + }, 20); + return; + } + t.step(function() { + assert_equals(bufferedEntries.length, 2, "FP and FCP."); + assert_equals(bufferedEntries[0].entryType, "paint"); + assert_equals(bufferedEntries[0].name, "first-paint"); + assert_equals(bufferedEntries[1].entryType, "paint"); + assert_equals(bufferedEntries[1].name, "first-contentful-paint"); + t.done(); + }); + } + t.step(function() { + testPaintEntries(); + }); +}, "Visited-attack test to check existence of FP and FCP."); +</script> +</body> diff --git a/testing/web-platform/tests/paint-timing/with-first-paint/sibling-painting-first-image.html b/testing/web-platform/tests/paint-timing/with-first-paint/sibling-painting-first-image.html new file mode 100644 index 0000000000..d393795e2d --- /dev/null +++ b/testing/web-platform/tests/paint-timing/with-first-paint/sibling-painting-first-image.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + <!-- This iframe will have a sibling that paints, we want to ensure it does not detect that paint. --> +<iframe id="listening-iframe" src="../resources/subframe-sending-paint.html"></iframe> +<script> +setup({"hide_test_state": true}); +var entriesExpectToReceive = [ + { + 'entryType': 'paint', + 'name': 'first-paint' + }, + { + 'entryType': 'paint', + 'name': 'first-contentful-paint' + } +]; +async_test(function (t) { + assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); + let paintingIframeHasDispatchedEntries = false; + window.addEventListener('message', t.step_func(e => { + if (!paintingIframeHasDispatchedEntries) { + // Check paint-timing entries from the painting iframe. + for (let i = 0; i < entriesExpectToReceive.length; i++) { + if (entriesExpectToReceive[i].entryType == e.data.entryType && + entriesExpectToReceive[i].name == e.data.name) { + entriesExpectToReceive.splice(i, 1); + break; + } + } + if (entriesExpectToReceive.length == 0) { + paintingIframeHasDispatchedEntries = true; + // Ask the listening iframe to send its paint-timing entries. + document.getElementById('listening-iframe'). + contentWindow.postMessage('', '*'); + } + return; + } + // Check the paint-timing entries from the listening iframe. + assert_equals(e.data, '0'); + // Check that current frame receives first-paint but not first-contentful-paint. + const bufferedEntries = performance.getEntriesByType('paint'); + assert_equals(bufferedEntries.length, 1); + assert_equals(bufferedEntries[0].entryType, 'paint'); + assert_equals(bufferedEntries[0].name, 'first-paint'); + t.done(); + })); +}, 'Frame ignores paint-timing events fired from sibling frame.'); +</script> +<!-- This iframe is where all of the painting occurs. --> +<iframe id="painting-iframe" src="../resources/subframe-painting.html"></iframe> +</body> +</html> |
