third_party/WebKit/LayoutTests/http/tests/loading/preload-picture-sizes.html

   1 <html>
   2 <head>
   3 <script src="/js-test-resources/js-test.js"></script>
   4 <script src="http://127.0.0.1:8000/resources/slow-script.pl?delay=100"></script>
   5 <script src="resources/picture-preload-helper.js"></script>
   6 </head>
   7 <body>
   8 <script>
   9     if (window.testRunner)
  10         testRunner.dumpAsText();
  11     shouldBeTrue("internals.isPreloaded('resources/image2.png');");
  12     for (var i = 1; i <= 10; ++i) {
  13         loadFromSource(i);
  14     }
  15     shouldBeFalse("internals.isPreloaded('resources/dup-image1.png?7');");
  16     shouldBeFalse("internals.isPreloaded('resources/dup-image1.png?8');");
  17     shouldBeFalse("internals.isPreloaded('resources/dup-image2.png?8');");
  18     shouldBeFalse("internals.isPreloaded('resources/dup-image3.png?8');");
  19     shouldBeFalse("internals.isPreloaded('resources/base-image1.png?101');");
  20     shouldBeFalse("internals.isPreloaded('resources/base-image2.png?101');");
  21     shouldBeFalse("internals.isPreloaded('resources/base-image3.png?101');");
  22     shouldBeFalse("internals.isPreloaded('resources/preload-test.jpg?10');");
  23     loadFromImg(11);
  24 </script>
  25 <!-- Control group -->
  26 <picture>
  27     <source srcset="resources/image2.png">
  28     <img src="preload-test.jpg?1">
  29 </picture>
  30 <!-- All permutations of src, srcset and sizes -->
  31 <picture>
  32     <source sizes="400px" srcset="resources/base-image1.png?1 200w, resources/base-image3.png?1 400w, resources/base-image2.png?1 800w">
  33     <img src="preload-test.jpg?1">
  34 </picture>
  35 <picture>
  36     <source srcset="resources/base-image1.png?2 200w, resources/base-image3.png?2 400w, resources/base-image2.png?2 800w" sizes="400px">
  37     <img src="preload-test.jpg?2">
  38 </picture>
  39 <picture>
  40     <source sizes="400px" srcset="resources/base-image1.png?3 200w, resources/base-image3.png?3 400w, resources/base-image2.png?3 800w">
  41     <img src="preload-test.jpg?3">
  42 </picture>
  43 <picture>
  44     <source sizes="400px" srcset="resources/base-image1.png?4 200w, resources/base-image3.png?4 400w, resources/base-image2.png?4 800w">
  45     <img src="preload-test.jpg?4">
  46 </picture>
  47 <picture>
  48     <source srcset="resources/base-image1.png?5 200w, resources/base-image3.png?5 400w, resources/base-image2.png?5 800w" sizes="400px">
  49     <img src="preload-test.jpg?5">
  50 </picture>
  51 <picture>
  52     <source srcset="resources/base-image1.png?6 200w, resources/base-image3.png?6 400w, resources/base-image2.png?6 800w" sizes="400px">
  53     <img src="preload-test.jpg?6">
  54 </picture>
  55 <!-- Duplicate attributes -->
  56 <picture>
  57     <source srcset="resources/base-image1.png?7 200w, resources/base-image3.png?7 400w, resources/base-image2.png?7 800w" sizes="400px"
  58      src="resources/dup-image1.png?7">
  59     <img src="preload-test.jpg?7">
  60 </picture>
  61 <picture>
  62     <source srcset="resources/base-image1.png?8 200w, resources/base-image3.png?8 400w, resources/base-image2.png?8 800w" sizes="400px"
  63      srcset="resources/dup-image1.png?8 200w, resources/dup-image3.png?8 400w, resources/dup-image2.png?8 800w">
  64     <img src="preload-test.jpg?8">
  65 </picture>
  66 <picture>
  67     <source srcset="resources/base-image1.png?9 200w, resources/base-image3.png?9 400w, resources/base-image2.png?9 800w" sizes="400px"
  68      sizes="800px">
  69     <img src="preload-test.jpg?9">
  70 </picture>
  71 <!-- Multiple sources -->
  72 <picture>
  73     <source media="(max-width: 500px)" srcset="resources/base-image1.png?101 200w, resources/base-image3.png?101 400w,
  74     resources/base-image2.png?101 10100w" sizes="400px">
  75     <source media="(min-width: 501px)" srcset="resources/base-image1.png?10 200w, resources/base-image3.png?10 400w,
  76     resources/base-image2.png?10 1000w" sizes="400px">
  77     <img src="preload-test.jpg?10">
  78 </picture>
  79 <!-- Sizes with 'x' descriptors -->
  80 <picture>
  81     <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">
  82     <img src="preload-test.jpg?11">
  83 </picture>
  84 </body>
  85 </html>
  86