<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
@media only screen and (-webkit-min-device-pixel-ratio: 1.0) {
#foo { background-color: red; }
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.1) {
#foo { background-color: blue; }
}
</style>
<div id=foo></div>
<script>
if (window.testRunner)
testRunner.zoomPageIn();
test(function() {
var div = document.getElementById("foo");
var computedStyle = window.getComputedStyle(div, null);
assert_equals(computedStyle.getPropertyValue('background-color'),
'rgb(0, 0, 255)');
}, "media query with zoom");
</script>