diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/paint-timing/fcp-only | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/paint-timing/fcp-only')
33 files changed, 1116 insertions, 0 deletions
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> |