1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test.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.testRunner.setBackingScaleFactor(1.5, function() {});
shouldBe("matchMedia('(resolution: 1.5dppx)').matches", "true");
shouldBe("resolutionFromStyle()", "1.5");
window.testRunner.setBackingScaleFactor(2, function() {});
shouldBe("matchMedia('(resolution: 2dppx)').matches", "true");
shouldBe("resolutionFromStyle()", "2");
window.testRunner.setBackingScaleFactor(1, function() {});
shouldBe("matchMedia('(resolution: 1dppx)').matches", "true");
shouldBe("resolutionFromStyle()", "1");
window.testRunner.setBackingScaleFactor(2.25, function() {});
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>
</body>
</html>
|
