94 lines
3.5 KiB
HTML
94 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
|
|
<div id="detector"></div>
|
|
|
|
<style>
|
|
#detector { width: 100px; }
|
|
@media (resolution: 1.00dppx) { #detector { width: 10px; } }
|
|
@media (resolution: 1.50dppx) { #detector { width: 15px; } }
|
|
@media (resolution: 2.00dppx) { #detector { width: 20px; } }
|
|
@media (resolution: 2.25dppx) { #detector { width: 23px; } }
|
|
@media print and (min-resolution: 3dppx) { #detector { width: 30px; } }
|
|
</style>
|
|
|
|
<script>
|
|
description("CSS3 media query test: resolution query with dppx. Using style element, @media css rule.")
|
|
|
|
if (window.testRunner && window.internals) {
|
|
window.testRunner.dumpAsText();
|
|
|
|
function resolutionFromStyle() {
|
|
var width = getComputedStyle(document.getElementById("detector")).width;
|
|
switch (width) {
|
|
case "10px":
|
|
return 1;
|
|
case "15px":
|
|
return 1.5;
|
|
case "20px":
|
|
return 2;
|
|
case "23px":
|
|
return 2.25;
|
|
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('(resolution: 0dpi)').matches", "false");
|
|
shouldBe("matchMedia('(min-resolution: 0dpi)').matches", "false");
|
|
shouldBe("matchMedia('(max-resolution: 0dpi)').matches", "false");
|
|
|
|
window.internals.setPageScaleFactor(1.5, 0, 0);
|
|
shouldBe("matchMedia('(resolution: 1.5dppx)').matches", "true");
|
|
shouldBe("resolutionFromStyle()", "1.5");
|
|
|
|
window.internals.setPageScaleFactor(2, 0, 0);
|
|
shouldBe("matchMedia('(resolution: 2dppx)').matches", "true");
|
|
shouldBe("resolutionFromStyle()", "2");
|
|
|
|
window.internals.setPageScaleFactor(1, 0, 0);
|
|
shouldBe("matchMedia('(resolution: 1dppx)').matches", "true");
|
|
shouldBe("resolutionFromStyle()", "1");
|
|
|
|
window.internals.setPageScaleFactor(2.25, 0, 0);
|
|
shouldBe("matchMedia('(resolution: 2.25dppx)').matches", "true");
|
|
shouldBe("resolutionFromStyle()", "2.25");
|
|
shouldBe("matchMedia('(resolution)').matches", "true");
|
|
shouldBe("matchMedia('(resolution: 216dpi)').matches", "true");
|
|
shouldBe("matchMedia('(min-resolution: 216dpi)').matches", "true");
|
|
shouldBe("matchMedia('(max-resolution: 216dpi)').matches", "true");
|
|
|
|
shouldBe("matchMedia('(resolution: 85dpcm)').matches", "true");
|
|
shouldBe("matchMedia('(min-resolution: 85dpcm)').matches", "true");
|
|
shouldBe("matchMedia('(max-resolution: 85dpcm)').matches", "true");
|
|
|
|
// Test printing.
|
|
|
|
window.internals.settings.setMediaTypeOverride("print");
|
|
shouldBe("matchMedia('(min-resolution: 300dpi)').matches", "true");
|
|
shouldBe("matchMedia('(min-resolution: 118dpcm)').matches", "true");
|
|
|
|
// Should match the one requiring 'print' media type.
|
|
shouldBe("resolutionFromStyle()", "3");
|
|
|
|
// As well as those matching 'all'.
|
|
appendMediaRule("@media (resolution: 3.125dppx) { #detector { width: 31px; } }");
|
|
shouldBe("resolutionFromStyle()", "3.125");
|
|
}
|
|
</script>
|
|
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|