<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test.js"></script>
<div id="detector"></div>
<style>
#detector { width: 100px; }
@media (-webkit-min-device-pixel-ratio: 1) { #detector { width: 10px; } }
@media print and (-webkit-min-device-pixel-ratio: 3) { #detector { width: 30px; } }
</style>
<script>
description("CSS3 media query test: -webkit-device-pixel-ratio combined with print.")
if (window.testRunner && window.internals) {
window.testRunner.dumpAsText();
function resolutionFromStyle() {
var width = getComputedStyle(document.getElementById("detector")).width;
switch (width) {
case "10px":
return 1;
case "30px":
return 3;
case "31px":
return 3.125;
default:
return undefined;
}
}
function appendMediaRule(rule) {
var lastStyleSheet = document.styleSheets[document.styleSheets.length - 1];
lastStyleSheet.insertRule(rule, lastStyleSheet.cssRules.length);
}
shouldBe("matchMedia('(-webkit-min-device-pixel-ratio: 1)').matches", "true");
shouldBe("resolutionFromStyle()", "1");
// Test printing.
window.internals.settings.setMediaTypeOverride("print");
shouldBe("matchMedia('(-webkit-min-device-pixel-ratio: 3)').matches", "true");
// Should match the one requiring 'print' media type.
shouldBe("resolutionFromStyle()", "3");
// As well as those matching 'all'.
appendMediaRule("@media (-webkit-min-device-pixel-ratio: 3.125) { #detector { width: 31px; } }");
shouldBe("resolutionFromStyle()", "3.125");
}
</script>
</body>
</html>