third_party/WebKit/LayoutTests/fast/dom/HTMLImageElement/image-picture-react-to-media-changes.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/js-test.js"></script>
   3 <script>
   4 var jsTestIsAsync = true;
   5 var img;
   6
   7 onload = function() {
   8     var iframe = document.getElementById('frame');
   9     var iframeDoc = iframe.contentWindow.document;
  10
  11     iframeDoc.body.innerHTML = '<picture id="pic">' +
  12         '<source media="(max-width: 90px)" srcset="resources/blue_rect.jpg"></source>' +
  13         '<source media="(max-width: 120px)" srcset="resources/image-set-4x.png"></source>' +
  14         '</picture>';
  15
  16     img = iframeDoc.createElement('img');
  17
  18     var first = true;
  19     img.onload = function() {
  20         if (first) {
  21             first = false;
  22             shouldNotBe('-1', 'img.currentSrc.indexOf("image-set-4x")');
  23             iframe.style.width = '80px';
  24         } else {
  25             shouldNotBe('-1', 'img.currentSrc.indexOf("blue_rect")');
  26             finishJSTest();
  27         }
  28     };
  29     img.onerror = function() {
  30         testFailed('Image should have loaded');
  31     };
  32     iframeDoc.getElementById('pic').appendChild(img);
  33 }
  34 </script>
  35
  36 <iframe id="frame" style="width: 100px;"></iframe>