summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/paint-timing
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/paint-timing')
-rw-r--r--testing/web-platform/tests/paint-timing/META.yml3
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/buffered-flag.window.js24
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-background-size.html38
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-bg-image-set.html36
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-bg-image-two-steps.html44
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-canvas-context.html24
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-document-opacity-image.html49
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-document-opacity-text.html39
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-ensure-update-the-rendering-step.html55
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-gradient.html27
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-iframe.html27
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-ignore-from-subframe.html27
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-3d-rotate-descendant.html39
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-3d-rotate.html29
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-scale-transition.html30
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-scale.html40
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-invisible-text.html30
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-opacity-descendant.html46
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-opacity.html40
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-out-of-bounds-translate.html30
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-out-of-bounds.html39
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-display.html32
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-image.html38
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-opacity.html32
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-text.html28
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-pseudo-element-visibility.html32
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-svg.html40
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-text-input.html24
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-typographic-pseudo.html32
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-video-frame.html27
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-video-poster.html28
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-whitespace.html45
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/fcp-with-rtl.html31
-rw-r--r--testing/web-platform/tests/paint-timing/fcp-only/svg-in-iframe.html14
-rw-r--r--testing/web-platform/tests/paint-timing/first-contentful-canvas-none.html23
-rw-r--r--testing/web-platform/tests/paint-timing/idlharness.window.js31
-rw-r--r--testing/web-platform/tests/paint-timing/input-text.html20
-rw-r--r--testing/web-platform/tests/paint-timing/replaced-content-image.html20
-rw-r--r--testing/web-platform/tests/paint-timing/resources/circle.svg3
-rw-r--r--testing/web-platform/tests/paint-timing/resources/circles.pngbin0 -> 2479 bytes
-rw-r--r--testing/web-platform/tests/paint-timing/resources/subframe-painting.html24
-rw-r--r--testing/web-platform/tests/paint-timing/resources/subframe-sending-paint.html13
-rw-r--r--testing/web-platform/tests/paint-timing/resources/svg.html20
-rw-r--r--testing/web-platform/tests/paint-timing/resources/utils.js52
-rw-r--r--testing/web-platform/tests/paint-timing/supported-paint-type.window.js22
-rw-r--r--testing/web-platform/tests/paint-timing/with-first-paint/basetest.html48
-rw-r--r--testing/web-platform/tests/paint-timing/with-first-paint/border-image.html28
-rw-r--r--testing/web-platform/tests/paint-timing/with-first-paint/buffered-flag.window.js36
-rw-r--r--testing/web-platform/tests/paint-timing/with-first-paint/child-painting-first-image.html46
-rw-r--r--testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-bg-image.html43
-rw-r--r--testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-canvas-webgl2.html47
-rw-r--r--testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-canvas.html43
-rw-r--r--testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-image.html42
-rw-r--r--testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-paint.html76
-rw-r--r--testing/web-platform/tests/paint-timing/with-first-paint/first-contentful-svg.html42
-rw-r--r--testing/web-platform/tests/paint-timing/with-first-paint/first-image-child.html45
-rw-r--r--testing/web-platform/tests/paint-timing/with-first-paint/first-paint-bg-color.html39
-rw-r--r--testing/web-platform/tests/paint-timing/with-first-paint/first-paint-only.html42
-rw-r--r--testing/web-platform/tests/paint-timing/with-first-paint/mask-image.html27
-rw-r--r--testing/web-platform/tests/paint-timing/with-first-paint/paint-visited.html48
-rw-r--r--testing/web-platform/tests/paint-timing/with-first-paint/sibling-painting-first-image.html54
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
new file mode 100644
index 0000000000..708682a207
--- /dev/null
+++ b/testing/web-platform/tests/paint-timing/resources/circles.png
Binary files differ
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>