Bug 1577193 [wpt PR 18724] - [LargestContentfulPaint] Fix anonymous LayoutObject aggregation, a=testonly
authorNicolás Peña Moreno <npm@chromium.org>
Mon, 02 Sep 2019 12:31:11 +0000
changeset 491496 420690bcd27679ac383a0f81074287d48500d3eb
parent 491495 62be6c754dadbaeee6ffc9ec412c3114c552ae86
child 491497 03fb26cf730f4f90fc8b0c98c931bedca9975bcf
push id36529
push useraiakab@mozilla.com
push dateTue, 03 Sep 2019 21:56:23 +0000
treeherdermozilla-central@fd891e83a7cd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1577193, 18724, 988593, 1773720, 691216
milestone71.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1577193 [wpt PR 18724] - [LargestContentfulPaint] Fix anonymous LayoutObject aggregation, a=testonly Automatic update from web-platform-tests [LargestContentfulPaint] Fix anonymous LayoutObject aggregation This CL allows ScopedPaintTimingDetectorBlockPaintHook to skip anonymous layout objects by only setting |reset_top_| on the EmplaceIfNeeded() method. This also means two DHECKs related to |top_| need to be removed. Bug: 988593 Change-Id: Iad4cf425d712436092ed2005eb39197d7cfd8439 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1773720 Reviewed-by: Steve Kobes <skobes@chromium.org> Commit-Queue: Nicolás Peña Moreno <npm@chromium.org> Cr-Commit-Position: refs/heads/master@{#691216} -- wpt-commits: 0a80ac883be37fc74859cd04815795e2a74077a1 wpt-pr: 18724
testing/web-platform/tests/element-timing/text-with-display-style.html
testing/web-platform/tests/largest-contentful-paint/invisible-images.html
testing/web-platform/tests/largest-contentful-paint/text-with-display-style.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/element-timing/text-with-display-style.html
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>Element Timing: observe text with display style.</title>
+<body>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/element-timing-helpers.js"></script>
+<style>
+h1 {
+  display: flex;
+}
+h2 {
+  display: grid;
+}
+h3 {
+  display: block;
+}
+</style>
+<h1 id='title1' elementtiming='h1'>I am h1</h1>
+<h2 id='title2' elementtiming='h2'>I am h2</h2>
+<h3 id='title3' elementtiming='h3'>I am h3</h3>
+<script>
+  async_test(function (t) {
+    if (!window.LargestContentfulPaint) {
+      assert_unreached("LargestContentfulPaint is not implemented");
+    }
+    const beforeRender = performance.now();
+    let observedFlex = false;
+    let observedGrid = false;
+    let observedBlock = false;
+    const observer = new PerformanceObserver(
+      t.step_func(function(entryList) {
+        entryList.getEntries().forEach(entry => {
+          if (entry.id === 'title1') {
+            assert_false(observedFlex, 'Should observe flex once');
+            observedFlex = true;
+            checkTextElement(entry, 'h1', 'title1', beforeRender, document.getElementById('title1'));
+          } else if (entry.id === 'title2') {
+            assert_false(observedGrid, 'Should observe grid once');
+            observedGrid = true;
+            checkTextElement(entry, 'h2', 'title2', beforeRender, document.getElementById('title2'));
+          } else {
+            assert_equals(entry.id, 'title3', 'ID should be title1, title2, or title3');
+            assert_false(observedBlock, 'Should observe block once');
+            observedBlock = true;
+            checkTextElement(entry, 'h3', 'title3', beforeRender, document.getElementById('title3'));
+          }
+        });
+        if (observedFlex && observedGrid && observedBlock)
+          t.done();
+      })
+    );
+    observer.observe({type: 'element', buffered: true});
+  }, 'Text with display style is observable.');
+</script>
+</body>
--- a/testing/web-platform/tests/largest-contentful-paint/invisible-images.html
+++ b/testing/web-platform/tests/largest-contentful-paint/invisible-images.html
@@ -18,20 +18,26 @@
 </head>
 <body>
 <script>
   async_test(t => {
     if (!window.LargestContentfulPaint) {
       assert_unreached("LargestContentfulPaint is not implemented");
     }
     const observer = new PerformanceObserver(
-      t.step_func_done(entryList => {
-        // The images should not have caused an entry, so fail test.
-        assert_unreached('Should not have received an entry! Received one with id '
-            + entryList.getEntries()[0].id);
+      t.step_func(entryList => {
+        entryList.getEntries().forEach(entry => {
+          // May receive a text entry. Ignore that entry.
+          if (!entry.url) {
+            return;
+          }
+          // The images should not have caused an entry, so fail test.
+          assert_unreached('Should not have received an entry! Received one with id '
+              + entryList.getEntries()[0].id);
+        });
       })
     );
     observer.observe({type: 'largest-contentful-paint', buffered: true});
     // Images have been added but should not cause entries to be dispatched.
     // Wait for 500ms and end test, ensuring no entry was created.
     t.step_timeout(() => {
       t.done();
     }, 500);
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/largest-contentful-paint/text-with-display-style.html
@@ -0,0 +1,77 @@
+<!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) {
+    if (!window.LargestContentfulPaint) {
+      assert_unreached("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_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime');
+        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>