LayoutTests/fast/css/max-device-aspect-ratio.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head id="myhead">
   4 <link rel="stylesheet" href="../js/resources/js-test-style.css">
   5 <script src="../js/resources/js-test-pre.js"></script>
   6 <script src="../js/resources/js-test-post-function.js"></script>
   7 <script>
   8 if (window.layoutTestController) {
   9     window.layoutTestController.waitUntilDone();
  10 }
  11
  12 var count = 0;
  13 var maxCount = 10;
  14 var timeout = 100;
  15
  16 function doTest()
  17 {
  18     var headElement = document.getElementById("myhead");
  19     var linkElement = document.createElement("link");
  20     linkElement.rel = "stylesheet";
  21     var width;
  22     var height;
  23     if (screen.width > screen.height) {
  24         // For a landscape screen, a ratio of 100/1 should always be greater than the screen (e.g., 16/9)
  25         width = 100;
  26         height = 1;
  27     } else {
  28         // For a portrait screen, a ratio of 1/1 will always be greater than the screen (e.g., 9/16)
  29         // For a square screen, a ratio of 1/1 will always be equal to the screen (e.g., 9/9)
  30         width = 1;
  31         height = 1;
  32     }
  33     linkElement.media = "screen and (max-device-aspect-ratio: " + width + "/" + height + ")";
  34     linkElement.href = "resources/device-aspect-ratio.css";
  35     headElement.appendChild(linkElement);
  36     description("This text is green if the max-device-aspect-ratio media query works properly.");
  37     setTimeout("waitForStylesheetLoad()", timeout);
  38 }
  39
  40 function waitForStylesheetLoad()
  41 {
  42     count++;
  43
  44     if (document.defaultView.getComputedStyle(document.getElementById('description'), null).color == "rgb(0, 128, 0)") {
  45         shouldBe("document.defaultView.getComputedStyle(document.getElementById('description'), null).color", "'rgb(0, 128, 0)'");
  46         window.successfullyParsed = true;
  47         isSuccessfullyParsed();
  48         if (window.layoutTestController) {
  49             window.layoutTestController.notifyDone();
  50         }
  51         return;
  52     }
  53
  54     if (count > maxCount) {
  55         testFailed("Stylesheet did not load in " + (maxCount * timeout / 1000) + " second(s).");
  56         return;
  57     }
  58
  59     setTimeout("waitForStylesheetLoad()", timeout);
  60 }
  61 </script>
  62 </head>
  63 <body onload="doTest()">
  64 <p id="description"></p>
  65 <div id="console"></div>
  66 </body>
  67 </html>