diff options
Diffstat (limited to 'testing/web-platform/tests/paint-timing/with-first-paint')
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> |