Bug 1611983 [wpt PR 21474] - [ElementTiming and LargestContentfulPain…

…t]Fix background img sizes, a=testonly Automatic update from web-platform-tests [ElementTiming and LargestContentfulPaint]Fix background img sizes Currently, we use exclusively the size of the LayoutObject to compute the background image sizes. This is incorrect, for instance when looking at CSS styles like ::first-letter. This CL fixes this by passing the image border to ImagePaintTimingDetector and ImageElementTiming. Bug: 996921 Change-Id: I94e4a2f3c8873be765b144179f7729430c885dac Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2023523 Commit-Queue: Nicolás Peña Moreno <npmchromium.org> Reviewed-by: Xianzhu Wang <wangxianzhuchromium.org> Cr-Commit-Position: refs/heads/master{#737289} -- wpt-commits: 3061f228d3d8b900b3aec8c7642ff58fc04ea011 wpt-pr: 21474 UltraBlame original commit: 5a507bc015aa8b68f543fffe735f8864469bf721
marco-c · Feb 12, 2020 · eff4eb7 · eff4eb7
1 parent 6ca2a4d
commit eff4eb7
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 8 deletions.
diff --git a/testing/web-platform/tests/element-timing/first-letter-background.html b/testing/web-platform/tests/element-timing/first-letter-background.html
@@ -6,6 +6,9 @@
 #target::first-letter {
   background-image: url('/images/black-rectangle.png');
 }
+#target {
+  font-size: 12px;
+}
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
@@ -17,19 +20,30 @@
     const div = document.getElementById('target');
     let textObserved = false;
     let imageObserved = false;
+    function calculateSize(entry) {
+      const ir = entry.intersectionRect;
+      return (ir.right - ir.left) * (ir.bottom - ir.top);
+    }
     const observer = new PerformanceObserver(
       t.step_func(function(entryList) {
         entryList.getEntries().forEach(entry => {
           if (entry.name === 'text-paint') {
             checkTextElement(entry, 'my_div', 'target', beforeRender, div);
             textObserved = true;
+            const size = calculateSize(entry);
+            // Assume average width is between 4px and 15px.
+            // Therefore, text size must be between 12 * (35*4) and 12 * (35*15).
+            assert_between_inclusive(size, 1680, 6300);
           }
           else {
             assert_equals(entry.name, 'image-paint');
             const pathname = window.location.origin + '/images/black-rectangle.png';
             checkElement(entry, pathname, 'my_div', 'target', beforeRender, div);
             checkNaturalSize(entry, 100, 50);
             imageObserved = true;
+            const size = calculateSize(entry);
+            // Background image size should only be approximately the size of a single letter.
+            assert_between_inclusive(size, 48, 180);
           }
         });
         if (textObserved && imageObserved)
@@ -39,5 +53,5 @@
     observer.observe({entryTypes: ['element']});
   }, 'Element with elementtiming attribute and background image in first-letter is observable.');
 </script>
-<div id='target' elementtiming='my_div'>A</div>
+<div id='target' elementtiming='my_div'>This is some text that I care about</div>
 </body>
diff --git a/testing/web-platform/tests/largest-contentful-paint/first-letter-background.html b/testing/web-platform/tests/largest-contentful-paint/first-letter-background.html
@@ -3,27 +3,69 @@
 <title>Largest Contentful Paint: observe element with background image in its first letter</title>
 <body>
 <style>
-#target::first-letter {
+div::first-letter {
   background-image: url('/images/black-rectangle.png');
 }
+div {
+  font-size: 12px;
+}
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="resources/largest-contentful-paint-helpers.js"></script>
 <script>
   async_test(function (t) {
     assert_precondition(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented");
-    const beforeLoad = performance.now();
+    let beforeLoad = performance.now();
+    let observedFirstLetter = false;
     const observer = new PerformanceObserver(
       t.step_func(function(entryList) {
-        entryList.getEntries().forEach(entry => {
+        const entry = entryList.getEntries()[entryList.getEntries().length -1];
+        if (!observedFirstLetter) {
+          // When we haven't observed first-letter as LCP...
           // If we happen to get a text entry due to text happening before the image, return.
-          if (entry.url === '')
+          if (entry.url === '') {
+            assert_equals(entry.entryType, 'largest-contentful-paint');
+            assert_greater_than_equal(entry.renderTime, beforeLoad);
+            assert_greater_than_equal(performance.now(), entry.renderTime);
+            assert_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime');
+            assert_equals(entry.duration, 0);
+            assert_equals(entry.loadTime, 0);
+            assert_equals(entry.id, 'target');
+            assert_equals(entry.element, document.getElementById('target'));
+          } else {
+            const url = window.location.origin + '/images/black-rectangle.png';
+            checkImage(entry, url, 'target', 0, beforeLoad, ['sizeLowerBound']);
+          }
+
+          // Now change the div content to proceed to the second part of the test.
+          beforeLoad = performance.now();
+          const div = document.createElement('div');
+          div.id = 'target2';
+          div.innerHTML = 'long text will now be LCP';
+          document.body.appendChild(div);
+          observedFirstLetter = true;
+        } else {
+          // Ignore entries that are caused by the initial 'target'.
+          if (entry.id === 'target')
             return;
-          const url = window.location.origin + '/images/black-rectangle.png';
-          checkImage(entry, url, 'target', 0, beforeLoad, ['sizeLowerBound']);
+          // The LCP must now be text.
+          if (entry.url !== '')
+            assert_unreached('First-letter background should not be LCP!');
+
+          assert_equals(entry.entryType, 'largest-contentful-paint');
+          assert_greater_than_equal(entry.renderTime, beforeLoad, 'blaaa');
+          assert_greater_than_equal(performance.now(), entry.renderTime, 'bleee');
+          assert_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime');
+          assert_equals(entry.duration, 0);
+          assert_equals(entry.id, 'target2');
+          const div = document.getElementById('target2');
+          // Estimate the text size: 12 * 100
+          assert_greater_than_equal(entry.size, 1200);
+          assert_equals(entry.loadTime, 0);
+          assert_equals(entry.element, div);
           t.done();
-      })
+        }
     }));
     observer.observe({entryTypes: ['largest-contentful-paint']});
   }, 'Largest Contentful Paint: first-letter is observable.');