Index: LayoutTests/fast/css/zoom-media-queries.html |
diff --git a/LayoutTests/fast/css/zoom-media-queries.html b/LayoutTests/fast/css/zoom-media-queries.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..b29be484015326541f19dc7f99dd7ccac2ea2333 |
--- /dev/null |
+++ b/LayoutTests/fast/css/zoom-media-queries.html |
@@ -0,0 +1,60 @@ |
+<!DOCTYPE html> |
+<style> |
+ html { font-size: 16px; } |
+</style> |
+<script src="../js/resources/js-test-pre.js"></script> |
+<script> |
+ if (!window.eventSender) { |
+ 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("eventSender.zoomPageIn()"); |
+ eventSender.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("eventSender.zoomPageOut()"); |
+ eventSender.zoomPageOut(); |
+ zoomLevel--; |
+ |
+ shouldBeFalse( |
+ 'matchMedia("(max-width: 300px)").matches'); |
+ shouldBeFalse( |
+ 'matchMedia("(max-width: 18.75em)").matches'); |
+ } |
+ } |
+</script> |