layout/style/test/media_queries_iframe2.html

   1 <!DOCTYPE html>
   2 <html lang="en-US">
   3 <head>
   4   <title>Media Queries Test inner frame</title>
   5   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   6   <meta http-equiv="Content-Style-Type" content="text/css">
   7   <style>
   8     html, body {
   9       width: 100%;
  10       height: 100%;
  11       margin: 0;
  12     }
  13   </style>
  14   <style type="text/css" id="style" media="all and (display-mode: browser)">
  15     body { background: yellow; }
  16   </style>
  17   <style type="text/css" id="style" media="all and (display-mode: standalone)">
  18     body { background: green; }
  19   </style>
  20   <style type="text/css" id="style" media="all and (display-mode: minimal-ui)">
  21     body { background: red; }
  22   </style>
  23   <style type="text/css" id="style" media="all and (display-mode: fullscreen)">
  24     body { background: blue; }
  25   </style>
  26 </head>
  27 <body>
  28 <script>
  29 window.addEventListener("message", e => {
  30   if (e.data == "get-background-color") {
  31     let { backgroundColor } = document.defaultView.getComputedStyle(document.body);
  32     e.source.postMessage({ backgroundColor }, e.origin);
  33   }
  34 });
  35 </script>
  36 </body>
  37 </html>