third_party/WebKit/LayoutTests/fast/css/media-query-dynamic.html

   1 <!DOCTYPE html>
   2 <style>
   3     iframe {
   4         height: 0;
   5         width: 0;
   6     }
   7 </style>
   8 <script src="../../resources/js-test.js"></script>
   9 <body onload="update()">
  10     <iframe></iframe>
  11 </body>
  12 <script>
  13     var iframe = document.querySelector("iframe");
  14     var doc = iframe.contentDocument;
  15     var p = doc.createElement('p');
  16     p.id = 'y1';
  17
  18     function update() {
  19         doc.body.appendChild(p);
  20
  21         var style = doc.createElement('style');
  22         style.textContent    = '@media all and (min-height: 10px) and (min-width: 10px) { #y1 { text-transform: uppercase; } }';
  23         doc.head.appendChild(style);
  24
  25         // here the viewport is 0x0
  26         shouldBe('iframe.contentDocument.defaultView.getComputedStyle(p).textTransform', '"none"');
  27         iframe.setAttribute("style", "height: 100px; width: 100px");
  28         // now the viewport is more than 10px X 10px
  29         shouldBe('iframe.contentDocument.defaultView.getComputedStyle(p).textTransform', '"uppercase"');
  30     }
  31 </script>