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

   1 <!DOCTYPE html>
   2 <script src="../../../resources/testharness.js"></script>
   3 <script src="../../../resources/testharnessreport.js"></script>
   4 <script src="resources/currentSrcHelper.js"></script>
   5 <script>
   6
   7     addEventListener("load", function() {
   8         test(function() {
   9             assert_equals(document.getElementById("simple").currentSrc.indexOf("file://"), 0);
  10             assert_equals(document.getElementById("simple").clientWidth, (window.innerWidth));
  11             assert_equals(currentSrcFileNameNoParams("simple"), "image-set-2x.png");
  12             assert_equals(document.getElementById("small_sizes").clientWidth, 300);
  13             assert_equals(currentSrcFileNameNoParams("small_sizes"), "image-set-1x.png");
  14             assert_equals(document.getElementById("sizes_x_descriptors").clientWidth, 400);
  15             assert_equals(currentSrcFileNameNoParams("sizes_x_descriptors"), "image-set-1x.png");
  16             assert_equals(document.getElementById("sizes_src").clientWidth, 400);
  17             assert_equals(currentSrcFileNameNoParams("sizes_src"), "image-set-1x.png");
  18             assert_equals(document.getElementById("default_sizes").clientWidth, window.innerWidth);
  19             assert_equals(currentSrcFileNameNoParams("default_sizes"), "image-set-2x.png");
  20             assert_equals(document.getElementById("invalid_length").clientWidth, window.innerWidth);
  21             assert_equals(currentSrcFileNameNoParams("invalid_length"), "image-set-2x.png");
  22             assert_approx_equals(document.getElementById("src_and_w").clientWidth, 700, 1/64);
  23             assert_equals(currentSrcFileNameNoParams("src_and_w"), "image-set-4x.png");
  24             assert_approx_equals(document.getElementById("src_and_w2").clientWidth, 700, 1/64);
  25             assert_equals(currentSrcFileNameNoParams("src_and_w2"), "image-set-1x.png");
  26             assert_approx_equals(document.getElementById("x_and_w").clientWidth, 700, 1/64);
  27             assert_equals(currentSrcFileNameNoParams("x_and_w"), "image-set-4x.png");
  28             assert_equals(document.getElementById("x_and_w2").clientWidth, 400);
  29             assert_equals(currentSrcFileNameNoParams("x_and_w2"), "image-set-2x.png");
  30             assert_equals(document.getElementById("x_and_w3").clientWidth, 400);
  31             assert_equals(currentSrcFileNameNoParams("x_and_w3"), "image-set-2x.png");
  32             assert_equals(document.getElementById("half_size").clientWidth, (window.innerWidth/2));
  33             assert_equals(currentSrcFileNameNoParams("half_size"), "image-set-2x.png");
  34             assert_equals(document.getElementById("infitisimal_sizes").clientWidth, (window.innerWidth/100));
  35             assert_equals(currentSrcFileNameNoParams("infitisimal_sizes"), "image-set-2x.png");
  36             assert_equals(currentSrcFileNameNoParams("fraction"), "data:,a");
  37             assert_equals(document.getElementById("seen_lowest_before").clientWidth, 1600);
  38             assert_equals(currentSrcFileNameNoParams("seen_lowest_before"), "image-set-4x.png");
  39             assert_equals(document.getElementById("seen_highest_before").clientWidth, 800);
  40             assert_equals(currentSrcFileNameNoParams("seen_highest_before"), "image-set-4x.png");
  41         }, "Test srcset and sizes at a 1x screen");
  42     }, false);
  43 </script>
  44 <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">
  45 <img id="small_sizes" src="" sizes="300px" srcset="../../hidpi/resources/image-set-1x.png?2 400w, ../../hidpi/resources/image-set-2x.png?2 800w">
  46 <!-- 'sizes' has no impact on 'x' or 'src' resources -->
  47 <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">
  48 <img id="sizes_src" src="../../hidpi/resources/image-set-1x.png?4" sizes="50vw">
  49 <!-- Missing sizes or an invalid one, give a source size of 100vw -->
  50 <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">
  51 <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">
  52 <!-- Make sure that the img src is not picked when 'w' is present -->
  53 <img id="src_and_w" src="../../hidpi/resources/image-set-1x.png?7" sizes="700px" srcset="resources/image-set-4x.png?7 1600w">
  54 <img id="src_and_w2" src="../../hidpi/resources/image-set-2x.png?8" sizes="700px" srcset="../../hidpi/resources/image-set-1x.png?8 400w">
  55 <img id="x_and_w" sizes="700px" srcset="../../hidpi/resources/image-set-1x.png?9 0.4x, resources/image-set-4x.png?9 1600w">
  56 <!-- The 'x' resource should be picked, and 'sizes' have no impact on its intrisic size -->
  57 <img id="x_and_w2" sizes="700px" srcset="../../hidpi/resources/image-set-2x.png?10 2x, resources/image-set-4x.png?10 16000w">
  58 <img id="x_and_w3" sizes="700px" srcset="resources/image-set-4x.png?11 16000w, ../../hidpi/resources/image-set-2x.png?11 2x">
  59 <!-- The intrinsic size should be identical to the 'sizes' value -->
  60 <img id="half_size" sizes="50vw" srcset="../../hidpi/resources/image-set-2x.png?12 800w, resources/image-set-4x.png?12 16000w">
  61 <img id="infitisimal_sizes" sizes="1vw" srcset="../../hidpi/resources/image-set-2x.png?13 800w, resources/image-set-4x.png?13 16000w">
  62 <img id="fraction" sizes="0.5px" srcset="data:,a 1w, data:,b 2x">
  63 <!-- Testing with cached resources. If a higher resolution cached resource is available, it should be picked -->
  64 <img id="seen_lowest_before" sizes="1600px" srcset="../../hidpi/resources/image-set-2x.png?1 800w, resources/image-set-4x.png?1 1600w">
  65 <img id="seen_highest_before" sizes="800px" srcset="../../hidpi/resources/image-set-2x.png?7 800w, resources/image-set-4x.png?7 1600w">