| <!DOCTYPE html> |
| <style> |
| html { font-size: 16px; } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| <script> |
| if (!window.testRunner) { |
| document.write("This test does not work in manual mode."); |
| } else { |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| // These media queries should be equivalent, since the documentElement |
| // has font-size:16px, so 300px should equal 18.75em. They should both |
| // initially be false (as the layout test runner is 800px wide). |
| shouldBeFalse( |
| 'matchMedia("(max-width: 300px)").matches'); |
| shouldBeFalse( |
| 'matchMedia("(max-width: 18.75em)").matches'); |
| debug(""); |
| |
| // While zooming in, the two media queries should either |
| // both match or both not match. |
| var maxZoomLevel = 20; |
| var zoomLevel = 0; |
| while (zoomLevel < maxZoomLevel) { |
| debug("testRunner.zoomPageIn()"); |
| testRunner.zoomPageIn(); |
| zoomLevel++; |
| |
| if (matchMedia("(max-width: 300px)").matches) |
| break; |
| |
| shouldBe( |
| 'matchMedia("(max-width: 300px)").matches', |
| 'matchMedia("(max-width: 18.75em)").matches'); |
| } |
| debug(""); |
| |
| // Once sufficiently zoomed in, both should match. |
| shouldBeTrue( |
| 'matchMedia("(max-width: 300px)").matches'); |
| shouldBeTrue( |
| 'matchMedia("(max-width: 18.75em)").matches'); |
| debug(""); |
| |
| // As soon as we zoom back out, both should stop matching |
| // and continue to not match. |
| while (zoomLevel > 0) { |
| debug("testRunner.zoomPageOut()"); |
| testRunner.zoomPageOut(); |
| zoomLevel--; |
| |
| shouldBeFalse( |
| 'matchMedia("(max-width: 300px)").matches'); |
| shouldBeFalse( |
| 'matchMedia("(max-width: 18.75em)").matches'); |
| } |
| } |
| </script> |
