| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head id="myhead"> |
| <link rel="stylesheet" href="../js/resources/js-test-style.css"> |
| <script src="../js/resources/js-test-pre.js"></script> |
| <script src="../js/resources/js-test-post-function.js"></script> |
| <script> |
| if (window.layoutTestController) { |
| window.layoutTestController.waitUntilDone(); |
| } |
| |
| var count = 0; |
| var maxCount = 10; |
| var timeout = 100; |
| |
| function doTest() |
| { |
| var headElement = document.getElementById("myhead"); |
| var linkElement = document.createElement("link"); |
| linkElement.rel = "stylesheet"; |
| var width; |
| var height; |
| if (screen.width > screen.height) { |
| // For a landscape screen, a ratio of 100/1 should always be greater than the screen (e.g., 16/9) |
| width = 100; |
| height = 1; |
| } else { |
| // For a portrait screen, a ratio of 1/1 will always be greater than the screen (e.g., 9/16) |
| // For a square screen, a ratio of 1/1 will always be equal to the screen (e.g., 9/9) |
| width = 1; |
| height = 1; |
| } |
| linkElement.media = "screen and (max-device-aspect-ratio: " + width + "/" + height + ")"; |
| linkElement.href = "resources/device-aspect-ratio.css"; |
| headElement.appendChild(linkElement); |
| description("This text is green if the max-device-aspect-ratio media query works properly."); |
| setTimeout("waitForStylesheetLoad()", timeout); |
| } |
| |
| function waitForStylesheetLoad() |
| { |
| count++; |
| |
| if (document.defaultView.getComputedStyle(document.getElementById('description'), null).color == "rgb(0, 128, 0)") { |
| shouldBe("document.defaultView.getComputedStyle(document.getElementById('description'), null).color", "'rgb(0, 128, 0)'"); |
| window.successfullyParsed = true; |
| isSuccessfullyParsed(); |
| if (window.layoutTestController) { |
| window.layoutTestController.notifyDone(); |
| } |
| return; |
| } |
| |
| if (count > maxCount) { |
| testFailed("Stylesheet did not load in " + (maxCount * timeout / 1000) + " second(s)."); |
| return; |
| } |
| |
| setTimeout("waitForStylesheetLoad()", timeout); |
| } |
| </script> |
| </head> |
| <body onload="doTest()"> |
| <p id="description"></p> |
| <div id="console"></div> |
| </body> |
| </html> |
