third_party/WebKit/LayoutTests/fast/dom/HTMLImageElement/image-sizes-2x.html

   1 <!DOCTYPE html>
   2 <script>
   3     window.targetScaleFactor = 2;
   4 </script>
   5 <script src="../../hidpi/resources/srcset-helper.js"></script>
   6 <script src="../../../resources/js-test.js"></script>
   7 <script src="resources/currentSrcHelper.js"></script>
   8 <script>
   9     if (window.testRunner)
  10         testRunner.dumpAsText();
  11
  12     addEventListener("load", function() {
  13         shouldBe('document.getElementById("simple").clientWidth', 'window.innerWidth');
  14         shouldBe('currentSrcFileNameNoParams("simple")', '"image-set-2x.png"');
  15         shouldBe('document.getElementById("small_sizes").clientWidth', '300');
  16         shouldBe('currentSrcFileNameNoParams("small_sizes")', '"image-set-2x.png"');
  17         shouldBe('document.getElementById("sizes_x_descriptors").clientWidth', '400');
  18         shouldBe('currentSrcFileNameNoParams("sizes_x_descriptors")', '"image-set-2x.png"');
  19         shouldBe('document.getElementById("sizes_src").clientWidth', '400');
  20         shouldBe('currentSrcFileNameNoParams("sizes_src")', '"image-set-1x.png"');
  21         shouldBe('document.getElementById("default_sizes").clientWidth', 'window.innerWidth');
  22         shouldBe('currentSrcFileNameNoParams("default_sizes")', '"image-set-4x.png"');
  23         shouldBe('document.getElementById("invalid_length").clientWidth', 'window.innerWidth');
  24         shouldBe('currentSrcFileNameNoParams("invalid_length")', '"image-set-2x.png"');
  25         shouldBeCloseTo('document.getElementById("src_and_w").clientWidth', 700, 1/64);
  26         shouldBe('currentSrcFileNameNoParams("src_and_w")', '"image-set-4x.png"');
  27         shouldBeCloseTo('document.getElementById("x_and_w").clientWidth', 700, 1/64);
  28         shouldBe('currentSrcFileNameNoParams("x_and_w")', '"image-set-4x.png"');
  29         shouldBe('document.getElementById("x_and_w2").clientWidth', '400');
  30         shouldBe('currentSrcFileNameNoParams("x_and_w2")', '"image-set-2x.png"');
  31         shouldBe('document.getElementById("x_and_w3").clientWidth', '400');
  32         shouldBe('currentSrcFileNameNoParams("x_and_w3")', '"image-set-2x.png"');
  33         shouldBe('document.getElementById("half_size").clientWidth', '(window.innerWidth/2)');
  34         shouldBe('currentSrcFileNameNoParams("half_size")', '"image-set-2x.png"');
  35         shouldBe('document.getElementById("infitisimal_sizes").clientWidth', '(window.innerWidth/100)');
  36         shouldBe('currentSrcFileNameNoParams("infitisimal_sizes")', '"image-set-2x.png"');
  37     }, false);
  38 </script>
  39 <img id="simple" src="" sizes="(max-width: 300px) 400px, 800px" srcset="../../hidpi/resources/image-set-1x.png?1 400w, ../../hidpi/resources/image-set-2x.png?1 800w">
  40 <img id="small_sizes" src="" sizes="300px" srcset="../../hidpi/resources/image-set-1x.png?2 400w, ../../hidpi/resources/image-set-2x.png?2 800w">
  41 <!-- 'sizes' has no impact on 'x' or 'src' resources -->
  42 <img id="sizes_x_descriptors" src="" sizes="50vw" srcset="../../hidpi/resources/image-set-1x.png?3 1x, ../../hidpi/resources/image-set-2x.png?3 2x">
  43 <img id="sizes_src" src="../../hidpi/resources/image-set-1x.png?4" sizes="50vw">
  44 <!-- Missing sizes or an invalid one, give a source size of 100vw -->
  45 <img id="default_sizes" src="" srcset="../../hidpi/resources/image-set-1x.png?5 400w, ../../hidpi/resources/image-set-2x.png?5 800w, resources/image-set-4x.png?5 1600w">
  46 <img id="invalid_length" src="" sizes="(max-width: 300px) 400w, 800w" srcset="../../hidpi/resources/image-set-1x.png?6 400w, ../../hidpi/resources/image-set-2x.png?6 800w">
  47 <img id="src_and_w" src="../../hidpi/resources/image-set-1x.png?7" sizes="700px" srcset="resources/image-set-4x.png?7 1600w">
  48 <img id="x_and_w" sizes="700px" srcset="../../hidpi/resources/image-set-1x.png?8 0.5x, resources/image-set-4x.png?8 1600w">
  49 <!-- The 'x' resource should be picked, and 'sizes' have no impact on its intrisic size -->
  50 <img id="x_and_w2" sizes="700px" srcset="../../hidpi/resources/image-set-2x.png?9 2x, resources/image-set-4x.png?9 16000w">
  51 <img id="x_and_w3" sizes="700px" srcset="resources/image-set-4x.png?10 16000w, ../../hidpi/resources/image-set-2x.png?10 2x">
  52 <!-- The intrinsic size should be identical to the 'sizes' value -->
  53 <img id="half_size" sizes="50vw" srcset="../../hidpi/resources/image-set-2x.png?11 800w, resources/image-set-4x.png?11 16000w">
  54 <img id="infitisimal_sizes" sizes="1vw" srcset="../../hidpi/resources/image-set-2x.png?12 800w, resources/image-set-4x.png?12 16000w">