Title: [216225] trunk/LayoutTests
Revision
216225
Author
commit-qu...@webkit.org
Date
2017-05-04 18:53:30 -0700 (Thu, 04 May 2017)

Log Message

Change the asynchronous image decoding tests to use the event webkitImageFrameReady
https://bugs.webkit.org/show_bug.cgi?id=171634

Patch by Said Abou-Hallawa <sabouhall...@apple.com> on 2017-05-04
Reviewed by Simon Fraser.

To test the async image decoding reliably we need to do the following:

-- Make sure to load the image before setting its src to the element.
-- Call document.body.offsetHeight to force layout.
-- Call testRunner.display() to force the first paint.
-- Use the webkitImageFrameReady to reliably know when an image frame is ready.
-- When webkitImageFrameReady is fired call testRunner.notifyDone(). This
   will force the second paint.

* fast/images/async-image-background-image-repeated.html:
* fast/images/async-image-background-image.html:
* fast/images/sprite-sheet-image-draw.html:

Modified Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (216224 => 216225)


--- trunk/LayoutTests/ChangeLog	2017-05-05 01:42:40 UTC (rev 216224)
+++ trunk/LayoutTests/ChangeLog	2017-05-05 01:53:30 UTC (rev 216225)
@@ -1,3 +1,23 @@
+2017-05-04  Said Abou-Hallawa  <sabouhall...@apple.com>
+
+        Change the asynchronous image decoding tests to use the event webkitImageFrameReady
+        https://bugs.webkit.org/show_bug.cgi?id=171634
+
+        Reviewed by Simon Fraser.
+
+        To test the async image decoding reliably we need to do the following:
+
+        -- Make sure to load the image before setting its src to the element.
+        -- Call document.body.offsetHeight to force layout.
+        -- Call testRunner.display() to force the first paint.
+        -- Use the webkitImageFrameReady to reliably know when an image frame is ready.
+        -- When webkitImageFrameReady is fired call testRunner.notifyDone(). This
+           will force the second paint.
+
+        * fast/images/async-image-background-image-repeated.html:
+        * fast/images/async-image-background-image.html:
+        * fast/images/sprite-sheet-image-draw.html:
+
 2017-05-04  Matt Lewis  <jlew...@apple.com>
 
         Mark webrtc/libwebrtc/descriptionGetters.html as flaky.

Modified: trunk/LayoutTests/fast/images/async-image-background-image-repeated.html (216224 => 216225)


--- trunk/LayoutTests/fast/images/async-image-background-image-repeated.html	2017-05-05 01:42:40 UTC (rev 216224)
+++ trunk/LayoutTests/fast/images/async-image-background-image-repeated.html	2017-05-05 01:53:30 UTC (rev 216225)
@@ -15,7 +15,6 @@
         background-repeat: repeat-x;
     }
     .image-background {
-        background-image: url(resources/sprite-sheet-red-green-blue.png);
     }
     @media (-webkit-min-device-pixel-ratio: 2) {
         .box {
@@ -39,33 +38,48 @@
     <br>
     <div class="box repeat-box image-background"></div>
     <script>
-        function forceRedraw(elements) {
-            for(var i = 0; i < elements.length; i++)
-                elements[i].style.display = 'none';
+        function setElementImageBackground(element, image) {
+            return new Promise((resolve) => {
+                element.style.backgroundImage = 'url(' + image.src + ')';
 
-            var trick = element.offsetHeight;
-            
-            for(var i = 0; i < elements.length; i++)
-                elements[i].style.display = 'inline-block';
+                // Force layout and display so the image frame starts decoding.
+                document.body.offsetHeight;
+                testRunner.display();
+ 
+                element.addEventListener("webkitImageFrameReady", function() {
+                    resolve();
+                }, false);
+            });
         }
 
         (function() {
-            var elements = document.getElementsByClassName("image-background");
-
-            if (window.internals) {
+            if (window.internals && window.testRunner) {
                 internals.clearMemoryCache();
+                internals.settings.setWebkitImageReadyEventEnabled(true);
                 internals.settings.setLargeImageAsyncDecodingEnabled(true);
+                testRunner.waitUntilDone();
             }
 
-            if (window.testRunner) {
-                testRunner.waitUntilDone();
-                forceRedraw(elements);
-                setTimeout(function() {
-                    forceRedraw(elements);
-                    testRunner.notifyDone();
-                }, 50);
+            var image = new Image();
+            image._onload_ = function() {
+                var elements = document.getElementsByClassName("image-background");
+ 
+                // Change the background of the elements.
+                if (window.internals && window.testRunner) {
+                    var promises = [];
+                    for (var index = 0; index < elements.length; ++index)
+                        promises.push(setElementImageBackground(elements[index], image));
+ 
+                    Promise.all(promises).then(() => {
+                        testRunner.notifyDone();
+                    });
+                } else {
+                    for (var index = 0; index < elements.length; ++index)
+                        elements[index].style.backgroundImage = 'url(' + image.src + ')';
+                }
             }
-        }
+            image.src = ""
+        })();
     </script>
 </body>
 </html>

Modified: trunk/LayoutTests/fast/images/async-image-background-image.html (216224 => 216225)


--- trunk/LayoutTests/fast/images/async-image-background-image.html	2017-05-05 01:42:40 UTC (rev 216224)
+++ trunk/LayoutTests/fast/images/async-image-background-image.html	2017-05-05 01:53:30 UTC (rev 216225)
@@ -6,7 +6,6 @@
         height: 300px;
     }
     .image-background {
-        background-image: url(resources/red-green-blue-900-300.png);
         background-position: -300px 0px;
     }
     @media (-webkit-min-device-pixel-ratio: 2) {
@@ -23,30 +22,34 @@
 <body>
     <div class="box image-background"></div>
     <script>
-        function forceRedraw(element) {
-            var disp = element.style.display;
-            element.style.display = 'none';
-            var trick = element.offsetHeight;
-            element.style.display = disp;
-        }
-
         (function() {
-            var divElement = document.getElementsByClassName("image-background")[0];
-
-            if (window.internals) {
+            if (window.internals && window.testRunner) {
                 internals.clearMemoryCache();
+                internals.settings.setWebkitImageReadyEventEnabled(true);
                 internals.settings.setLargeImageAsyncDecodingEnabled(true);
+                testRunner.waitUntilDone();
             }
 
-            if (window.testRunner) {
-                testRunner.waitUntilDone();
-                forceRedraw(divElement);
-                setTimeout(function() {
-                    forceRedraw(divElement);
-                    testRunner.notifyDone();
-                }, 50);
+            var image = new Image();
+            image._onload_ = function() {
+                var element = document.getElementsByClassName("image-background")[0];
+ 
+                // Change the background of the element.
+                element.style.backgroundImage = 'url(' + image.src + ')';
+ 
+                if (window.internals && window.testRunner) {
+                    // Force layout and display so the image frame starts decoding.
+                    document.body.offsetHeight;
+                    testRunner.display();
+ 
+                    // Wait for the image frame to finish decoding before finishing the test.
+                    element.addEventListener("webkitImageFrameReady", function() {
+                        testRunner.notifyDone();
+                    }, false);
+                }
             }
-        }
+            image.src = ""
+        })();
     </script>
 </body>
 </html>

Modified: trunk/LayoutTests/fast/images/sprite-sheet-image-draw.html (216224 => 216225)


--- trunk/LayoutTests/fast/images/sprite-sheet-image-draw.html	2017-05-05 01:42:40 UTC (rev 216224)
+++ trunk/LayoutTests/fast/images/sprite-sheet-image-draw.html	2017-05-05 01:53:30 UTC (rev 216225)
@@ -7,7 +7,6 @@
         display: inline-block;
     }
     .image-background {
-        background-image: url(resources/sprite-sheet-red-green-blue.png);
         background-position: 0px -1000px;
     }
     @media (-webkit-min-device-pixel-ratio: 2) {
@@ -24,30 +23,34 @@
 <body>
     <div class="box image-background"></div>
     <script>
-        function forceRedraw(element) {
-            var disp = element.style.display;
-            element.style.display = 'none';
-            var trick = element.offsetHeight;
-            element.style.display = disp;
-        }
-
         (function() {
-            var divElement = document.getElementsByClassName("image-background")[0];
-
-            if (window.internals) {
+            if (window.internals && window.testRunner) {
                 internals.clearMemoryCache();
+                internals.settings.setWebkitImageReadyEventEnabled(true);
                 internals.settings.setLargeImageAsyncDecodingEnabled(true);
+                testRunner.waitUntilDone();
             }
 
-            if (window.testRunner) {
-                testRunner.waitUntilDone();
-                forceRedraw(divElement);
-                setTimeout(function() {
-                    forceRedraw(divElement);
-                    testRunner.notifyDone();
-                }, 50);
+            var image = new Image();
+            image._onload_ = function() {
+                var element = document.getElementsByClassName("image-background")[0];
+ 
+                // Change the background of the element.
+                element.style.backgroundImage = 'url(' + image.src + ')';
+ 
+                if (window.internals && window.testRunner) {
+                    // Force layout and display so the image frame starts decoding.
+                    document.body.offsetHeight;
+                    testRunner.display();
+ 
+                    // Wait for the image frame to finish decoding before finishing the test.
+                    element.addEventListener("webkitImageFrameReady", function() {
+                        testRunner.notifyDone();
+                    }, false);
+                }
             }
-        }
+            image.src = ""
+        })();
     </script>
 </body>
 </html>
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to