summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/largest-contentful-paint/text-with-display-style.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/largest-contentful-paint/text-with-display-style.html')
-rw-r--r--testing/web-platform/tests/largest-contentful-paint/text-with-display-style.html76
1 files changed, 76 insertions, 0 deletions
diff --git a/testing/web-platform/tests/largest-contentful-paint/text-with-display-style.html b/testing/web-platform/tests/largest-contentful-paint/text-with-display-style.html
new file mode 100644
index 0000000000..69edc168c5
--- /dev/null
+++ b/testing/web-platform/tests/largest-contentful-paint/text-with-display-style.html
@@ -0,0 +1,76 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>Largest Contentful Paint: observe text with display style.</title>
+<body>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+#title {
+ display: flex;
+}
+</style>
+<h1 id='title'>I am a title!</h1>
+<script>
+ async_test(function (t) {
+ assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented");
+ let beforeRender;
+ /* In this test, we first observe a header with style 'display: flex'.
+ * Once observed, we remove it and add a header with style 'display: grid'.
+ * And once that is observed, we remove it and add a header with style 'display: block'.
+ * At each step, we check the values of the entries received.
+ */
+ let observedFlex = false;
+ let observedGrid = false;
+ const observer = new PerformanceObserver(
+ t.step_func(function(entryList) {
+ assert_equals(entryList.getEntries().length, 1);
+ const entry = entryList.getEntries()[0];
+ assert_equals(entry.entryType, 'largest-contentful-paint');
+ assert_greater_than_equal(entry.renderTime, beforeRender);
+ assert_greater_than_equal(performance.now(), entry.renderTime);
+ assert_approx_equals(entry.startTime, entry.renderTime, 0.001,
+ 'startTime should be equal to renderTime to the precision of 1 millisecond.');
+ assert_equals(entry.duration, 0);
+ // TODO: find a good way to bound text size.
+ assert_greater_than_equal(entry.size, 500);
+ assert_equals(entry.url, '');
+ assert_equals(entry.loadTime, 0);
+ if (!observedFlex) {
+ observedFlex = true;
+ assert_equals(entry.id, 'title');
+ const title = document.getElementById('title');
+ assert_equals(entry.element, title);
+ // Remove 'display: flex' and add 'display: grid' text.
+ title.parentNode.removeChild(title);
+ const title2 = document.createElement('h1');
+ title2.id = 'title2';
+ title2.style = 'display: grid';
+ title2.innerHTML = 'I am a second title!';
+ document.body.appendChild(title2);
+ beforeRender = performance.now();
+ } else if (!observedGrid) {
+ observedGrid = true;
+ assert_equals(entry.id, 'title2');
+ const title2 = document.getElementById('title2');
+ assert_equals(entry.element, title2);
+ // Remove 'display: grid' and add 'display: block' text.
+ title2.parentNode.removeChild(title2);
+ const title3 = document.createElement('h1');
+ title3.id = 'title3';
+ title3.style = 'display: block';
+ title3.innerHTML = 'I am the third and last title!';
+ document.body.appendChild(title3);
+ beforeRender = performance.now();
+ } else {
+ assert_equals(entry.id, 'title3');
+ const title3 = document.getElementById('title3');
+ assert_equals(entry.element, title3);
+ t.done();
+ }
+ })
+ );
+ observer.observe({type: 'largest-contentful-paint', buffered: true});
+ beforeRender = performance.now();
+ }, 'Text with display style is observable.');
+</script>
+</body>