[ElementTiming] Only notify paint for loaded resources

This CL adds a check to ensure that an image is loaded before reporting via the Element Timing API. We want to report the first paint but only after the image is loaded. This matters for images that are progressively rendered. Bug: 879270 Change-Id: Ia0bcc68c1050967560103170be28c40238e839d9 Reviewed-on: https://chromium-review.googlesource.com/c/1415716Reviewed-by: Yoav Weiss <yoavweiss@chromium.org> Commit-Queue: Nicolás Peña Moreno <npm@chromium.org> Cr-Commit-Position: refs/heads/master@{#625327}

[ElementTiming] Only notify paint for loaded resources
This CL adds a check to ensure that an image is loaded before reporting via the Element Timing API. We want to report the first paint but only after the image is loaded. This matters for images that are progressively rendered. Bug: 879270 Change-Id: Ia0bcc68c1050967560103170be28c40238e839d9 Reviewed-on: https://chromium-review.googlesource.com/c/1415716Reviewed-by: Yoav Weiss <yoavweiss@chromium.org> Commit-Queue: Nicolás Peña Moreno <npm@chromium.org> Cr-Commit-Position: refs/heads/master@{#625327}
8685c949 · Nicolas Pena · Commit Bot · e30928ee · 8685c949 · 8685c949
Commit 8685c949 authored Jan 23, 2019 by Nicolas Pena Committed by Commit Bot Jan 23, 2019
3 changed files
--- a/third_party/blink/renderer/core/paint/image_painter.cc
+++ b/third_party/blink/renderer/core/paint/image_painter.cc
@@ -204,7 +204,8 @@ void ImagePainter::PaintIntoRect(GraphicsContext& context,
      SkBlendMode::kSrcOver,
      LayoutObject::ShouldRespectImageOrientation(&layout_image_));
  if (origin_trials::ElementTimingEnabled(&layout_image_.GetDocument()) &&
-      IsHTMLImageElement(node) && !context.ContextDisabled()) {
+      IsHTMLImageElement(node) && !context.ContextDisabled() &&
+      layout_image_.CachedImage() && layout_image_.CachedImage()->IsLoaded()) {
    LocalDOMWindow* window = layout_image_.GetDocument().domWindow();
    DCHECK(window);
    ImageElementTiming::From(*window).NotifyImagePainted(

--- a/third_party/blink/web_tests/http/tests/performance-timing/element-timing/progressively-loaded-image.html
+++ b/third_party/blink/web_tests/http/tests/performance-timing/element-timing/progressively-loaded-image.html
+<!DOCTYPE html>
+<html>
+<meta charset=utf-8 />
+<title>Element Timing: buffer elements before onload</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src="resources/element-timing-helpers.js"></script>
+<body>
+<img src=/resources/slow-image.php?name=square20.png&mimeType=image&sleep=500>
+<script>
+  let beforeRender;
+  // Number of bytes to be read on the initial read, before sleeping.
+  // Should be sufficient to do at least a first scan.
+  let numInitial = 300;
+  let sleep = 500;
+  async_test(function(t) {
+    const observer = new PerformanceObserver(
+      t.step_func_done(function(entryList) {
+        assert_equals(entryList.getEntries().length, 1);
+        const entry = entryList.getEntries()[0];
+        // Since the image is only fully loaded after the sleep, the render timestamp
+        // must be greater than |beforeRender| + |sleep|.
+        checkElement(entry, 'my_image', beforeRender + sleep);
+      })
+    );
+    observer.observe({entryTypes: ['element']});
+    const img = document.createElement('img');
+    img.src = '/resources/progressive-image.php?name=square20.jpg&numInitial='
+      + numInitial + '&sleep=' + sleep;
+    img.setAttribute('elementtiming', 'my_image');
+    document.body.appendChild(img)
+    beforeRender = performance.now();
+  }, "Element Timing: image render timestamp occurs after it is fully loaded.");
+</script>
--- a/third_party/blink/web_tests/http/tests/resources/progressive-image.php
+++ b/third_party/blink/web_tests/http/tests/resources/progressive-image.php
+<?php
+$name = $_GET['name'];
+$sleepTime = $_GET['sleep'];
+$numInitial = $_GET['numInitial'];
+header('Content-Type: image');
+header('Content-Length: ' . filesize($name));
+// Read from the beginning, |numInitial| bytes.
+$first = file_get_contents($name, FALSE, NULL, 0, $numInitial);
+echo $first;
+flush();
+usleep($sleepTime*1000);
+// Read the remainder after having slept.
+$second = file_get_contents($name, FALSE, NULL, $numInitial);
+echo $second;