<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/image2.png');");
for (var i = 1; i <= 10; ++i) {
loadFromSource(i);
}
shouldBeFalse("internals.isPreloaded('resources/dup-image1.png?7');");
shouldBeFalse("internals.isPreloaded('resources/dup-image1.png?8');");
shouldBeFalse("internals.isPreloaded('resources/dup-image2.png?8');");
shouldBeFalse("internals.isPreloaded('resources/dup-image3.png?8');");
shouldBeFalse("internals.isPreloaded('resources/base-image1.png?101');");
shouldBeFalse("internals.isPreloaded('resources/base-image2.png?101');");
shouldBeFalse("internals.isPreloaded('resources/base-image3.png?101');");
shouldBeFalse("internals.isPreloaded('resources/preload-test.jpg?10');");
loadFromImg(11);
</script>
<!-- Control group -->
<picture>
<source srcset="resources/image2.png">
<img src="preload-test.jpg?1">
</picture>
<!-- All permutations of src, srcset and sizes -->
<picture>
<source sizes="400px" srcset="resources/base-image1.png?1 200w, resources/base-image3.png?1 400w, resources/base-image2.png?1 800w">
<img src="preload-test.jpg?1">
</picture>
<picture>
<source srcset="resources/base-image1.png?2 200w, resources/base-image3.png?2 400w, resources/base-image2.png?2 800w" sizes="400px">
<img src="preload-test.jpg?2">
</picture>
<picture>
<source sizes="400px" srcset="resources/base-image1.png?3 200w, resources/base-image3.png?3 400w, resources/base-image2.png?3 800w">
<img src="preload-test.jpg?3">
</picture>
<picture>
<source sizes="400px" srcset="resources/base-image1.png?4 200w, resources/base-image3.png?4 400w, resources/base-image2.png?4 800w">
<img src="preload-test.jpg?4">
</picture>
<picture>
<source srcset="resources/base-image1.png?5 200w, resources/base-image3.png?5 400w, resources/base-image2.png?5 800w" sizes="400px">
<img src="preload-test.jpg?5">
</picture>
<picture>
<source srcset="resources/base-image1.png?6 200w, resources/base-image3.png?6 400w, resources/base-image2.png?6 800w" sizes="400px">
<img src="preload-test.jpg?6">
</picture>
<!-- Duplicate attributes -->
<picture>
<source srcset="resources/base-image1.png?7 200w, resources/base-image3.png?7 400w, resources/base-image2.png?7 800w" sizes="400px"
src="resources/dup-image1.png?7">
<img src="preload-test.jpg?7">
</picture>
<picture>
<source srcset="resources/base-image1.png?8 200w, resources/base-image3.png?8 400w, resources/base-image2.png?8 800w" sizes="400px"
srcset="resources/dup-image1.png?8 200w, resources/dup-image3.png?8 400w, resources/dup-image2.png?8 800w">
<img src="preload-test.jpg?8">
</picture>
<picture>
<source srcset="resources/base-image1.png?9 200w, resources/base-image3.png?9 400w, resources/base-image2.png?9 800w" sizes="400px"
sizes="800px">
<img src="preload-test.jpg?9">
</picture>
<!-- Multiple sources -->
<picture>
<source media="(max-width: 500px)" srcset="resources/base-image1.png?101 200w, resources/base-image3.png?101 400w,
resources/base-image2.png?101 10100w" sizes="400px">
<source media="(min-width: 501px)" srcset="resources/base-image1.png?10 200w, resources/base-image3.png?10 400w,
resources/base-image2.png?10 1000w" sizes="400px">
<img src="preload-test.jpg?10">
</picture>
<!-- Sizes with 'x' descriptors -->
<picture>
<source srcset="resources/preload-test.jpg?11, resources/base-image1.png?11 2x, resources/base-image3.png?11 4x, resources/base-image2.png?11 8x" sizes="400px">
<img src="preload-test.jpg?11">
</picture>
</body>
</html>
Codebase Browser
chromium