Bug 1464392: De-race sizes-dynamic-001.html. r?dholbert draft
authorEmilio Cobos Álvarez <emilio@crisal.io>
Fri, 25 May 2018 15:14:24 +0200
changeset 799898 5c259e052a867040902c7190f4e65106b5229ada
parent 799753 ddecd6c8a7f388440aa63d9e48eff60d840c0c1c
child 799904 7ae258db12380f30ffbf1acbe2e488d4c21c6124
push id111189
push userbmo:emilio@crisal.io
push dateFri, 25 May 2018 14:24:47 +0000
reviewersdholbert
bugs1464392
milestone62.0a1
Bug 1464392: De-race sizes-dynamic-001.html. r?dholbert There's no guarantee the image will be resized before the harness takes the screenshot. Indeed, the image is guaranteed to have the old width / offsetWidth if we were to query it from frameLoaded. We do need to wait for the image load task to run. This makes the test reliable in both Blink and Gecko at least, afaict. MozReview-Commit-ID: 7EDC7jlUScc
testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-dynamic-001.html
--- a/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-dynamic-001.html
+++ b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-dynamic-001.html
@@ -1,7 +1,20 @@
 <!doctype html>
+<html class="reftest-wait">
 <title>Image intrinsic size specified via sizes attribute reacts properly to media changes</title>
 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
 <link rel="match" href="sizes-dynamic-001-ref.html">
 <link rel="help" href="https://html.spec.whatwg.org/#sizes-attributes">
 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1149357">
-<iframe onload="this.width = '500'" width="200" height="500" srcdoc='<!doctype html><img srcset="/images/green-256x256.png 100w" style="max-width: 100%" sizes="(min-width: 400px) 10px, 20px">'></iframe>
+<script>
+function frameLoaded(frame) {
+  frame.width = "500";
+  let img = frame.contentDocument.querySelector('img');
+
+  // Trigger the viewport resize, which will trigger the image load task.
+  img.offsetWidth;
+
+  // Wait for the image load task to run.
+  setTimeout(() => document.documentElement.removeAttribute("class"), 0);
+}
+</script>
+<iframe onload="frameLoaded(this)" width="200" height="500" srcdoc='<!doctype html><img srcset="/images/green-256x256.png 100w" style="max-width: 100%" sizes="(min-width: 400px) 10px, 20px">'></iframe>