OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <style> |
| 3 html { font-size: 16px; } |
| 4 </style> |
| 5 <script src="../js/resources/js-test-pre.js"></script> |
| 6 <script> |
| 7 if (!window.eventSender) { |
| 8 document.write("This test does not work in manual mode."); |
| 9 } else { |
| 10 if (window.testRunner) |
| 11 testRunner.dumpAsText(); |
| 12 |
| 13 // These media queries should be equivalent, since the documentElement |
| 14 // has font-size:16px, so 300px should equal 18.75em. They should both |
| 15 // initially be false (as the layout test runner is 800px wide). |
| 16 shouldBeFalse( |
| 17 'matchMedia("(max-width: 300px)").matches'); |
| 18 shouldBeFalse( |
| 19 'matchMedia("(max-width: 18.75em)").matches'); |
| 20 debug(""); |
| 21 |
| 22 // While zooming in, the two media queries should either |
| 23 // both match or both not match. |
| 24 var maxZoomLevel = 20; |
| 25 var zoomLevel = 0; |
| 26 while (zoomLevel < maxZoomLevel) { |
| 27 debug("eventSender.zoomPageIn()"); |
| 28 eventSender.zoomPageIn(); |
| 29 zoomLevel++; |
| 30 |
| 31 if (matchMedia("(max-width: 300px)").matches) |
| 32 break; |
| 33 |
| 34 shouldBe( |
| 35 'matchMedia("(max-width: 300px)").matches', |
| 36 'matchMedia("(max-width: 18.75em)").matches'); |
| 37 } |
| 38 debug(""); |
| 39 |
| 40 // Once sufficiently zoomed in, both should match. |
| 41 shouldBeTrue( |
| 42 'matchMedia("(max-width: 300px)").matches'); |
| 43 shouldBeTrue( |
| 44 'matchMedia("(max-width: 18.75em)").matches'); |
| 45 debug(""); |
| 46 |
| 47 // As soon as we zoom back out, both should stop matching |
| 48 // and continue to not match. |
| 49 while (zoomLevel > 0) { |
| 50 debug("eventSender.zoomPageOut()"); |
| 51 eventSender.zoomPageOut(); |
| 52 zoomLevel--; |
| 53 |
| 54 shouldBeFalse( |
| 55 'matchMedia("(max-width: 300px)").matches'); |
| 56 shouldBeFalse( |
| 57 'matchMedia("(max-width: 18.75em)").matches'); |
| 58 } |
| 59 } |
| 60 </script> |
OLD | NEW |