third_party/WebKit/LayoutTests/fast/hidpi/image-srcset-invalid-descriptor.html

   1 <html>
   2 <head>
   3 <script>
   4     window.targetScaleFactor = 1;
   5 </script>
   6 <script src="resources/srcset-helper.js"></script>
   7 <script src="../../resources/js-test.js"></script>
   8 <script>
   9     addEventListener("load", function() {
  10         shouldBeTrue('document.getElementById("foo").clientWidth==200');
  11         shouldBeTrue('document.getElementById("foo2").clientWidth==200');
  12         shouldBeTrue('document.getElementById("foo3").clientWidth==200');
  13         shouldBeTrue('document.getElementById("foo4").clientWidth==200');
  14         shouldBeTrue('document.getElementById("foo5").clientWidth==200');
  15         shouldBeTrue('document.getElementById("foo6").clientWidth==200');
  16         shouldBeTrue('document.getElementById("foo7").clientWidth==200');
  17         shouldBeTrue('document.getElementById("foo8").clientWidth==200');
  18         shouldBeTrue('document.getElementById("foo9").clientWidth==200');
  19         shouldBeTrue('document.getElementById("foo10").clientWidth==200');
  20     }, false);
  21 </script>
  22 </head>
  23
  24 <body id="body">
  25     <div>This test passes if the image below is a 200px green square when the deviceScaleFactor is 1.</div>
  26     <div>It tests that the 1x resource is ignored since it contains invalid descriptors.</div>
  27     <div>The 2x resource has an intrinsic width of 200px, since it's a 400px wide image at 2x DPR.</div>
  28     <img id="foo" src="" srcset="resources/blue-100-px-square.png 43q 1x dfs 3dd, resources/green-400-px-square.png 2x">
  29     <img id="foo2" src="" srcset="resources/blue-100-px-square.png 300q, resources/green-400-px-square.png 2x">
  30     <img id="foo3" src="" srcset="resources/blue-100-px-square.png 100w 100w, resources/green-400-px-square.png 2x">
  31     <img id="foo4" src="" srcset="resources/blue-100-px-square.png 100h 100h, resources/green-400-px-square.png 2x">
  32     <img id="foo5" src="" srcset="resources/blue-100-px-square.png 100x 100h, resources/green-400-px-square.png 2x">
  33     <img id="foo6" src="" srcset="resources/blue-100-px-square.png 100x 100w, resources/green-400-px-square.png 2x">
  34     <img id="foo7" src="" srcset="resources/blue-100-px-square.png -100w, resources/green-400-px-square.png 2x">
  35     <img id="foo8" src="" srcset="resources/blue-100-px-square.png -100h, resources/green-400-px-square.png 2x">
  36     <img id="foo9" src="" srcset="resources/blue-100-px-square.png -1x, resources/green-400-px-square.png 2x">
  37     <img id="foo10" src="" srcset="resources/blue-100-px-square.png 100h, resources/green-400-px-square.png 2x">
  38 </body>
  39 </html>