third_party/WebKit/LayoutTests/fast/dom/HTMLImageElement/image-picture-1x.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/js-test.js"></script>
   3 <script src="resources/currentSrcHelper.js"></script>
   4 <script>
   5     if (window.testRunner)
   6         testRunner.dumpAsText();
   7
   8     addEventListener("load", function() {
   9         shouldBe('document.getElementById("canary").clientWidth', '75');
  10         shouldBe('currentSrcFileName("canary")', '"blue_rect.jpg?0"');
  11         shouldBe('document.getElementById("simple").clientWidth', '800');
  12         shouldBe('currentSrcFileName("simple")', '"image-set-2x.png?2"');
  13         shouldBe('document.getElementById("multiple").clientWidth', '800');
  14         shouldBe('currentSrcFileName("multiple")', '"image-set-2x.png?2"');
  15         shouldBe('document.getElementById("other_children").clientWidth', '800');
  16         shouldBe('currentSrcFileName("other_children")', '"image-set-2x.png?2"');
  17         shouldBe('document.getElementById("img_before_source").clientWidth', '75');
  18         shouldBe('currentSrcFileName("img_before_source")', '"blue_rect.jpg?1"');
  19         shouldBe('document.getElementById("unknown_type").clientWidth', '1600');
  20         shouldBe('currentSrcFileName("unknown_type")', '"image-set-4x.png?3"');
  21         shouldBe('document.getElementById("svg_type").clientWidth', '800');
  22         shouldBe('currentSrcFileName("svg_type")', '"image-set-2x.png?2"');
  23         shouldBe('document.getElementById("empty_type").clientWidth', '800');
  24         shouldBe('currentSrcFileName("empty_type")', '"image-set-2x.png?2"');
  25         shouldBe('document.getElementById("whitespace_type").clientWidth', '800');
  26         shouldBe('currentSrcFileName("whitespace_type")', '"image-set-2x.png?2"');
  27         shouldBe('document.getElementById("parameter_type").clientWidth', '800');
  28         shouldBe('currentSrcFileName("parameter_type")', '"image-set-2x.png?2"');
  29         shouldBe('document.getElementById("empty_srcset").clientWidth', '1600');
  30         shouldBe('currentSrcFileName("empty_srcset")', '"image-set-4x.png?3"');
  31         shouldBe('document.getElementById("no_srcset").clientWidth', '1600');
  32         shouldBe('currentSrcFileName("no_srcset")', '"image-set-4x.png?3"');
  33     }, false);
  34 </script>
  35 <!-- A canary image to see that the test is actually working -->
  36 <img id="canary" src="resources/blue_rect.jpg?0">
  37 <!-- simple picture construct -->
  38 <picture>
  39     <source media="(max-width: 400px)" sizes="400px" srcset="../../hidpi/resources/image-set-1x.png?1 400w, ../../hidpi/resources/image-set-2x.png?1 800w,
  40         resources/image-set-4x.png?1 1600w">
  41     <source media="(max-width: 800px)" sizes="800px" srcset="../../hidpi/resources/image-set-1x.png?2 400w, ../../hidpi/resources/image-set-2x.png?2 800w,
  42         resources/image-set-4x.png?2 1600w">
  43     <source media="(max-width: 1600px)" sizes="1600px" srcset="../../hidpi/resources/image-set-1x.png?3 400w, ../../hidpi/resources/image-set-2x.png?3 800w,
  44         resources/image-set-4x.png?3 1600w">
  45     <img id="simple" src="resources/blue_rect.jpg?1">
  46 </picture>
  47 <!-- Multiple img elements -->
  48 <picture>
  49     <source media="(max-width: 400px)" sizes="400px" srcset="../../hidpi/resources/image-set-1x.png?1 400w, ../../hidpi/resources/image-set-2x.png?1 800w,
  50         resources/image-set-4x.png?1 1600w">
  51     <source media="(max-width: 800px)" sizes="800px" srcset="../../hidpi/resources/image-set-1x.png?2 400w, ../../hidpi/resources/image-set-2x.png?2 800w,
  52         resources/image-set-4x.png?2 1600w">
  53     <source media="(max-width: 1600px)" sizes="1600px" srcset="../../hidpi/resources/image-set-1x.png?3 400w, ../../hidpi/resources/image-set-2x.png?3 800w,
  54         resources/image-set-4x.png?3 1600w">
  55     <img src="resources/blue_rect.jpg?1">
  56     <img id="multiple" src="resources/blue_rect.jpg?1">
  57 </picture>
  58 <!-- non-source children - should be ignored-->
  59 <picture>
  60     <div>some text</div>
  61     <source media="(max-width: 400px)" sizes="400px" srcset="../../hidpi/resources/image-set-1x.png?1 400w, ../../hidpi/resources/image-set-2x.png?1 800w,
  62         resources/image-set-4x.png?1 1600w">
  63     <source media="(max-width: 800px)" sizes="800px" srcset="../../hidpi/resources/image-set-1x.png?2 400w, ../../hidpi/resources/image-set-2x.png?2 800w,
  64         resources/image-set-4x.png?2 1600w">
  65     <source media="(max-width: 1600px)" sizes="1600px" srcset="../../hidpi/resources/image-set-1x.png?3 400w, ../../hidpi/resources/image-set-2x.png?3 800w,
  66         resources/image-set-4x.png?3 1600w">
  67     <img id="other_children" src="resources/blue_rect.jpg?1">
  68 </picture>
  69 <!-- img before its source siblings - should ignore its siblings -->
  70 <picture>
  71     <img id="img_before_source" src="resources/blue_rect.jpg?1">
  72     <source media="(max-width: 400px)" sizes="400px" srcset="../../hidpi/resources/image-set-1x.png?1 400w, ../../hidpi/resources/image-set-2x.png?1 800w,
  73         resources/image-set-4x.png?1 1600w">
  74     <source media="(max-width: 800px)" sizes="800px" srcset="../../hidpi/resources/image-set-1x.png?2 400w, ../../hidpi/resources/image-set-2x.png?2 800w,
  75         resources/image-set-4x.png?2 1600w">
  76     <source media="(max-width: 1600px)" sizes="1600px" srcset="../../hidpi/resources/image-set-1x.png?3 400w, ../../hidpi/resources/image-set-2x.png?3 800w,
  77         resources/image-set-4x.png?3 1600w">
  78 </picture>
  79 <!-- source with unknown type - should be ignored -->
  80 <picture>
  81     <source media="(max-width: 400px)" sizes="400px" srcset="../../hidpi/resources/image-set-1x.png?1 400w, ../../hidpi/resources/image-set-2x.png?1 800w,
  82         resources/image-set-4x.png?1 1600w">
  83     <source media="(max-width: 800px)" type="image/jp2" sizes="800px" srcset="../../hidpi/resources/image-set-1x.png?2 400w, ../../hidpi/resources/image-set-2x.png?2 800w,
  84         resources/image-set-4x.png?2 1600w">
  85     <source media="(max-width: 1600px)" sizes="1600px" srcset="../../hidpi/resources/image-set-1x.png?3 400w, ../../hidpi/resources/image-set-2x.png?3 800w,
  86         resources/image-set-4x.png?3 1600w">
  87     <img id="unknown_type" src="resources/blue_rect.jpg?1">
  88 </picture>
  89 <!-- SVG source - should not be ignored -->
  90 <picture>
  91     <source media="(max-width: 400px)" sizes="400px" srcset="../../hidpi/resources/image-set-1x.png?1 400w, ../../hidpi/resources/image-set-2x.png?1 800w,
  92         resources/image-set-4x.png?1 1600w">
  93     <source media="(max-width: 800px)" type="image/svg+xml" sizes="800px" srcset="../../hidpi/resources/image-set-1x.png?2 400w, ../../hidpi/resources/image-set-2x.png?2 800w,
  94         resources/image-set-4x.png?2 1600w">
  95     <source media="(max-width: 1600px)" sizes="1600px" srcset="../../hidpi/resources/image-set-1x.png?3 400w, ../../hidpi/resources/image-set-2x.png?3 800w,
  96         resources/image-set-4x.png?3 1600w">
  97     <img id="svg_type" src="resources/blue_rect.jpg?1">
  98 </picture>
  99 <!-- Empty type - should not be ignored -->
 100 <picture>
 101     <source media="(max-width: 400px)" sizes="400px" srcset="../../hidpi/resources/image-set-1x.png?1 400w, ../../hidpi/resources/image-set-2x.png?1 800w,
 102         resources/image-set-4x.png?1 1600w">
 103     <source media="(max-width: 800px)" type="" sizes="800px" srcset="../../hidpi/resources/image-set-1x.png?2 400w, ../../hidpi/resources/image-set-2x.png?2 800w,
 104         resources/image-set-4x.png?2 1600w">
 105     <source media="(max-width: 1600px)" sizes="1600px" srcset="../../hidpi/resources/image-set-1x.png?3 400w, ../../hidpi/resources/image-set-2x.png?3 800w,
 106         resources/image-set-4x.png?3 1600w">
 107     <img id="empty_type" src="resources/blue_rect.jpg?1">
 108 </picture>
 109 <!-- whitespace type - should not be ignored -->
 110 <picture>
 111     <source media="(max-width: 400px)" sizes="400px" srcset="../../hidpi/resources/image-set-1x.png?1 400w, ../../hidpi/resources/image-set-2x.png?1 800w,
 112         resources/image-set-4x.png?1 1600w">
 113     <source media="(max-width: 800px)" type=" " sizes="800px" srcset="../../hidpi/resources/image-set-1x.png?2 400w, ../../hidpi/resources/image-set-2x.png?2 800w,
 114         resources/image-set-4x.png?2 1600w">
 115     <source media="(max-width: 1600px)" sizes="1600px" srcset="../../hidpi/resources/image-set-1x.png?3 400w, ../../hidpi/resources/image-set-2x.png?3 800w,
 116         resources/image-set-4x.png?3 1600w">
 117     <img id="whitespace_type" src="resources/blue_rect.jpg?1">
 118 </picture>
 119 <!-- parameter type - should not be ignored -->
 120 <picture>
 121     <source media="(max-width: 400px)" sizes="400px" srcset="../../hidpi/resources/image-set-1x.png?1 400w, ../../hidpi/resources/image-set-2x.png?1 800w,
 122         resources/image-set-4x.png?1 1600w">
 123     <source media="(max-width: 800px)" type="image/png;bla=bla" sizes="800px" srcset="../../hidpi/resources/image-set-1x.png?2 400w, ../../hidpi/resources/image-set-2x.png?2 800w,
 124         resources/image-set-4x.png?2 1600w">
 125     <source media="(max-width: 1600px)" sizes="1600px" srcset="../../hidpi/resources/image-set-1x.png?3 400w, ../../hidpi/resources/image-set-2x.png?3 800w,
 126         resources/image-set-4x.png?3 1600w">
 127     <img id="parameter_type" src="resources/blue_rect.jpg?1">
 128 </picture>
 129 <!-- source with empty srcset - should be ignored -->
 130 <picture>
 131     <source media="(max-width: 400px)" sizes="400px" srcset="../../hidpi/resources/image-set-1x.png?1 400w, ../../hidpi/resources/image-set-2x.png?1 800w,
 132         resources/image-set-4x.png?1 1600w">
 133     <source media="(max-width: 800px)" sizes="800px" srcset=", ,  ">
 134     <source media="(max-width: 1600px)" sizes="1600px" srcset="../../hidpi/resources/image-set-1x.png?3 400w, ../../hidpi/resources/image-set-2x.png?3 800w,
 135         resources/image-set-4x.png?3 1600w">
 136     <img id="empty_srcset" src="resources/blue_rect.jpg?1">
 137 </picture>
 138 <!-- source with no srcset - should be ignored -->
 139 <picture>
 140     <source media="(max-width: 400px)" sizes="400px" srcset="../../hidpi/resources/image-set-1x.png?1 400w, ../../hidpi/resources/image-set-2x.png?1 800w,
 141         resources/image-set-4x.png?1 1600w">
 142     <source media="(max-width: 800px)" sizes="800px">
 143     <source media="(max-width: 1600px)" sizes="1600px" srcset="../../hidpi/resources/image-set-1x.png?3 400w, ../../hidpi/resources/image-set-2x.png?3 800w,
 144         resources/image-set-4x.png?3 1600w">
 145     <img id="no_srcset" src="resources/blue_rect.jpg?1">
 146 </picture>