third_party/WebKit/LayoutTests/fast/dom/HTMLImageElement/image-srcset-react-to-media-changes-when-image-not-changed.html

   1 <!DOCTYPE html>
   2 <title>Make sure the image's display dimensions adapt to viewport changes even if the picked resource wasn't changed</title>
   3 <script src="../../../resources/testharness.js"></script>
   4 <script src="../../../resources/testharnessreport.js"></script>
   5 <iframe style="width: 70px;"></iframe>
   6 <script>
   7 async_test(function(t) {
   8     var iframe = document.querySelector('iframe');
   9     var iframeDoc = iframe.contentWindow.document;
  10
  11     document.body.offsetTop;
  12     iframeDoc.body.innerHTML = '<img id="srcset" srcset="resources/blue_rect.jpg 75w, resources/image-set-4x.png 120w">';
  13     iframeDoc.body.offsetTop;
  14
  15     img = iframeDoc.getElementById('srcset');
  16
  17     var first = true;
  18     img.onload = t.step_func(function() {
  19         assert_true(first);
  20         first = false;
  21         assert_not_equals(img.currentSrc.indexOf("blue_rect.jpg"), -1);
  22         assert_true(iframe.contentWindow.matchMedia('(width: 70px)').matches);
  23         assert_equals(img.width, 70);
  24
  25         iframe.style.width = '75px';
  26         // Make sure that once 2 RAFs have passed, the image is set to the right dimensions.
  27         requestAnimationFrame(function() {
  28             requestAnimationFrame(function() {
  29                 setTimeout(t.step_func(function() {
  30                     assert_not_equals(img.currentSrc.indexOf("blue_rect.jpg"), -1);
  31                     assert_equals(img.width, 75);
  32                     t.done();
  33                 }), 0);
  34             });
  35         });
  36     });
  37 });
  38 </script>