Bug 1547533 - Update ResizeObserver tests on <img>. r=dholbert
authorBoris Chiou <boris.chiou@gmail.com>
Tue, 25 Jun 2019 18:10:04 +0000
changeset 480080 28854bf543da35394680922280e267eb65eb7a41
parent 480079 e927a7bfb85e6ef07fc84c34b5e967fa1924e426
child 480081 dcf33acba09527474a11e107f71583916fc86cbe
push id36201
push usercsabou@mozilla.com
push dateWed, 26 Jun 2019 03:57:29 +0000
treeherdermozilla-central@a3cad1d7836c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1547533
milestone69.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 1547533 - Update ResizeObserver tests on <img>. r=dholbert Looks like onload event is not enough, so we still have intermittents. Based on the suggestion in html spec: https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode We decode the image in parallel, and only inserting it into the DOM (and thus causing it to be painted) once the decoding process is complete. Because the decode() method attempts to ensure that the decoded image data is available for at least one frame, it can be combined with the requestAnimationFrame() API. This means it can be used with coding styles or frameworks that ensure that all DOM modifications are batched together as animation frame callbacks. Hope this could reduce the occurrence rate of this intermittent. Differential Revision: https://phabricator.services.mozilla.com/D35732
testing/web-platform/tests/resize-observer/observe.html
--- a/testing/web-platform/tests/resize-observer/observe.html
+++ b/testing/web-platform/tests/resize-observer/observe.html
@@ -120,22 +120,22 @@ function test4() {
   ]);
   return helper.start(() => {
     t1.remove();
     t2.remove();
   });
 }
 
 function test5() {
-  let img = createAndAppendElement("img");
+  const img = new Image();
   img.style.width = "15px";
   img.style.height = "15px";
   img.src = "resources/image.png";
 
-  var helper = new ResizeTestHelper("test5: observe img",[
+  let helper = new ResizeTestHelper("test5: observe img",[
     {
       setup: observer => {
         observer.observe(img);
       },
       notify: entries => {
       }
     },
     {
@@ -143,18 +143,25 @@ function test5() {
         img.style.width = "15.5px";
       },
       notify: entries => {
         assert_equals(entries.length, 1);
         assert_equals(entries[0].contentRect.width, 15.5);
       }
     }
   ]);
-  return new Promise((resolve, reject) => {
-    img.onload = () => resolve();
+  return img.decode().then(() => {
+    return new Promise(resolve => {
+      requestAnimationFrame(() => {
+        document.body.appendChild(img);
+        resolve();
+      });
+    });
+  }).catch(error => {
+    assert_unreached("decode image failed");
   }).then(() => {
     return helper.start(() => img.remove());
   });
 }
 
 function test6() {
   let iframe = createAndAppendElement("iframe");
   iframe.src = "./resources/iframe.html";