| <html> |
| <head> |
| <script src="/js-test-resources/js-test.js"></script> |
| <script src="http://127.0.0.1:8000/resources/slow-script.pl?delay=100"></script> |
| <script src="resources/picture-preload-helper.js"></script> |
| </head> |
| <body> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| shouldBeTrue("internals.isPreloaded('resources/preload-test.jpg?0');"); |
| shouldBeTrue("internals.isPreloaded('resources/image2.png');"); |
| loadFromImg(2); |
| loadFromSource(3); |
| loadFromSource(4); |
| loadFromSource(5); |
| loadFromImg(6); |
| loadFromImg(7); |
| </script> |
| <!-- Control group --> |
| <img src="resources/preload-test.jpg?0"> |
| <picture> |
| <source srcset="resources/image2.png"> |
| <img></picture> |
| <!-- Invalid nesting tests --> |
| <!-- In the following tests, nesting messes up the selection algorithm --> |
| <picture> |
| <picture> |
| <source sizes="400px" srcset="resources/base-image1.png?1 200w, resources/base-image3.png?1 400w, resources/base-image2.png?1 800w"> |
| <div> |
| </picture> |
| </div> |
| <img src="resources/preload-test.jpg?1"> |
| </picture> |
| </picture> |
| <picture> |
| <div> |
| </picture> |
| </picture> |
| </picture> |
| </div> |
| <source sizes="400px" srcset="resources/base-image1.png?2 200w, resources/base-image3.png?2 400w, resources/base-image2.png?2 800w"> |
| <img src="resources/preload-test.jpg?2"> |
| </picture> |
| <!-- Here we preload the correct resource, since document.write is not modifying the DOM --> |
| <picture> |
| <script>document.write("bla");</script> |
| <source sizes="400px" srcset="resources/base-image1.png?3 200w, resources/base-image3.png?3 400w, resources/base-image2.png?3 800w"> |
| <img src="resources/preload-test.jpg?3"> |
| </picture> |
| <!-- In the following tests, nesting messes up the selection algorithm, but we don't get it --> |
| <picture> |
| <div> |
| <picture> |
| <div> |
| <source sizes="400px" srcset="resources/base-image1.png?4 200w, resources/base-image3.png?4 400w, resources/base-image2.png?4 800w"> |
| </div> |
| <img src="resources/preload-test.jpg?4"> |
| </picture> |
| </div> |
| </picture> |
| <picture> |
| <div> |
| <picture> |
| <div> |
| <source sizes="400px" srcset="resources/base-image1.png?5 200w, resources/base-image3.png?5 400w, resources/base-image2.png?5 800w"> |
| <img src="resources/preload-test.jpg?5"> |
| </div> |
| </picture> |
| </div> |
| </picture> |
| <!-- We don't keep a checkpoint of the picture stack, so document.write inside picture |
| *that modifies the DOM* will result in a false prediction --> |
| <!-- In the following tests, we preload the wrong resource, because document.write is modifying the DOM --> |
| <script>document.write('<picture>');</script> |
| <source sizes="400px" srcset="resources/base-image1.png?6 200w, resources/base-image3.png?6 400w, resources/base-image2.png?6 800w"> |
| <img src="resources/preload-test.jpg?6"> |
| </picture> |
| <picture> |
| <script>document.write('<source sizes="400px" srcset="resources/base-image1.png?7 200w, resources/base-image3.png?7 400w, resources/base-image2.png?7 800w">');</script> |
| <img src="resources/preload-test.jpg?7"> |
| </picture> |
| </body> |
| </html> |
