summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/paint-timing/with-first-paint
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/paint-timing/with-first-paint')
-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
16 files changed, 706 insertions, 0 deletions
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>