|
1 <!DOCTYPE HTML> |
|
2 <html> |
|
3 <!-- |
|
4 https://bugzilla.mozilla.org/show_bug.cgi?id=156716 |
|
5 --> |
|
6 <!-- |
|
7 |
|
8 This is test 46 from the Acid3 test, http://acid3.acidtests.org/ |
|
9 extracted from the test framework there and put into Mochitest. |
|
10 |
|
11 (from irc.mozilla.org, developers) |
|
12 [2008-05-14 18:07:38] <Hixie> dbaron: I hereby grant all files available from the server http://acid3.acidtests.org/ under the following license: (c) copyright 2008 Ian Hickson. These documents may be used under the terms of any of the following licenses: MPL. GPL. LGPL. BSD. |
|
13 |
|
14 --> |
|
15 <head> |
|
16 <title>Test for Bug 156716</title> |
|
17 <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> |
|
18 <style type="text/css"> |
|
19 iframe#selectors { width: 0; height: 0; } |
|
20 </style> |
|
21 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> |
|
22 </head> |
|
23 <body> |
|
24 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=156716">Mozilla Bug 156716</a> |
|
25 <div id="content" style="display: none"> |
|
26 |
|
27 </div> |
|
28 <pre id="test"> |
|
29 <script class="testbody" type="text/javascript"> |
|
30 |
|
31 /** Test for Bug 156716 **/ |
|
32 SimpleTest.waitForExplicitFinish(); |
|
33 function runTest() { |
|
34 |
|
35 function getTestDocument() { |
|
36 var iframe = document.getElementById("selectors"); |
|
37 var doc = iframe.contentDocument; |
|
38 for (var i = doc.documentElement.childNodes.length-1; i >= 0; i -= 1) |
|
39 doc.documentElement.removeChild(doc.documentElement.childNodes[i]); |
|
40 doc.documentElement.appendChild(doc.createElement('head')); |
|
41 doc.documentElement.firstChild.appendChild(doc.createElement('title')); |
|
42 doc.documentElement.appendChild(doc.createElement('body')); |
|
43 return doc; |
|
44 } |
|
45 |
|
46 // test 46: media queries |
|
47 var doc = getTestDocument(); |
|
48 var style = doc.createElement('style'); |
|
49 style.setAttribute('type', 'text/css'); |
|
50 style.appendChild(doc.createTextNode('@media all and (min-color: 0) { #a { text-transform: uppercase; } }')); // matches |
|
51 style.appendChild(doc.createTextNode('@media not all and (min-color: 0) { #b { text-transform: uppercase; } }')); |
|
52 style.appendChild(doc.createTextNode('@media only all and (min-color: 0) { #c { text-transform: uppercase; } }')); // matches |
|
53 style.appendChild(doc.createTextNode('@media (bogus) { #d { text-transform: uppercase; } }')); |
|
54 style.appendChild(doc.createTextNode('@media all and (bogus) { #e { text-transform: uppercase; } }')); |
|
55 style.appendChild(doc.createTextNode('@media not all and (bogus) { #f { text-transform: uppercase; } }')); // matches |
|
56 style.appendChild(doc.createTextNode('@media only all and (bogus) { #g { text-transform: uppercase; } }')); |
|
57 style.appendChild(doc.createTextNode('@media (bogus), all { #h { text-transform: uppercase; } }')); // matches |
|
58 style.appendChild(doc.createTextNode('@media all and (bogus), all { #i { text-transform: uppercase; } }')); // matches |
|
59 style.appendChild(doc.createTextNode('@media not all and (bogus), all { #j { text-transform: uppercase; } }')); // matches |
|
60 style.appendChild(doc.createTextNode('@media only all and (bogus), all { #k { text-transform: uppercase; } }')); // matches |
|
61 style.appendChild(doc.createTextNode('@media all, (bogus) { #l { text-transform: uppercase; } }')); // matches |
|
62 style.appendChild(doc.createTextNode('@media all, all and (bogus) { #m { text-transform: uppercase; } }')); // matches |
|
63 style.appendChild(doc.createTextNode('@media all, not all and (bogus) { #n { text-transform: uppercase; } }')); // matches |
|
64 style.appendChild(doc.createTextNode('@media all, only all and (bogus) { #o { text-transform: uppercase; } }')); // matches |
|
65 style.appendChild(doc.createTextNode('@media all and color { #p { text-transform: uppercase; } }')); |
|
66 style.appendChild(doc.createTextNode('@media all and min-color: 0 { #q { text-transform: uppercase; } }')); |
|
67 style.appendChild(doc.createTextNode('@media all, all and color { #r { text-transform: uppercase; } }')); |
|
68 style.appendChild(doc.createTextNode('@media all, all and min-color: 0 { #s { text-transform: uppercase; } }')); |
|
69 style.appendChild(doc.createTextNode('@media all and min-color: 0, all { #t { text-transform: uppercase; } }')); |
|
70 style.appendChild(doc.createTextNode('@media (max-color: 0) and (max-monochrome: 0) { #u { text-transform: uppercase; } }')); |
|
71 style.appendChild(doc.createTextNode('@media (min-color: 1), (min-monochrome: 1) { #v { text-transform: uppercase; } }')); // matches |
|
72 style.appendChild(doc.createTextNode('@media all and (min-color: 0) and (min-monochrome: 0) { #w { text-transform: uppercase; } }')); // matches |
|
73 style.appendChild(doc.createTextNode('@media not all and (min-color: 1), not all and (min-monochrome: 1) { #x { text-transform: uppercase; } }')); // matches |
|
74 style.appendChild(doc.createTextNode('@media all and (min-height: 1em) and (min-width: 1em) { #y1 { text-transform: uppercase; } }')); |
|
75 style.appendChild(doc.createTextNode('@media all and (max-height: 1em) and (min-width: 1em) { #y2 { text-transform: uppercase; } }')); |
|
76 style.appendChild(doc.createTextNode('@media all and (min-height: 1em) and (max-width: 1em) { #y3 { text-transform: uppercase; } }')); |
|
77 style.appendChild(doc.createTextNode('@media all and (max-height: 1em) and (max-width: 1em) { #y4 { text-transform: uppercase; } }')); // matches |
|
78 doc.getElementsByTagName('head')[0].appendChild(style); |
|
79 var names = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y1', 'y2', 'y3', 'y4']; |
|
80 for (var i in names) { |
|
81 var p = doc.createElement('p'); |
|
82 p.id = names[i]; |
|
83 doc.body.appendChild(p); |
|
84 } |
|
85 var count = 0; |
|
86 var check = function (c, e) { |
|
87 count += 1; |
|
88 var p = doc.getElementById(c); |
|
89 is(doc.defaultView.getComputedStyle(p, '').textTransform, e ? 'uppercase' : 'none', "case " + c + " failed (index " + count + ")"); |
|
90 } |
|
91 check('a', true); // 1 |
|
92 check('b', false); |
|
93 check('c', true); |
|
94 check('d', false); |
|
95 check('e', false); |
|
96 check('f', false); // true in old spec; commented out in real Acid3 |
|
97 check('g', false); |
|
98 check('h', true); |
|
99 check('i', true); |
|
100 check('j', true); // 10 |
|
101 check('k', true); |
|
102 check('l', true); |
|
103 check('m', true); |
|
104 check('n', true); |
|
105 check('o', true); |
|
106 check('p', false); |
|
107 check('q', false); |
|
108 check('r', true); // false in old spec |
|
109 check('s', true); // false in old spec |
|
110 check('t', true); // 20 - false in old spec |
|
111 check('u', false); |
|
112 check('v', true); |
|
113 check('w', true); |
|
114 check('x', true); |
|
115 // here the viewport is 0x0 |
|
116 check('y1', false); // 25 |
|
117 check('y2', false); |
|
118 check('y3', false); |
|
119 check('y4', true); |
|
120 document.getElementById("selectors").setAttribute("style", "height: 100px; width: 100px"); |
|
121 // now the viewport is more than 1em by 1em |
|
122 check('y1', true); // 29 |
|
123 check('y2', false); |
|
124 check('y3', false); |
|
125 check('y4', false); |
|
126 document.getElementById("selectors").removeAttribute("style"); |
|
127 // here the viewport is 0x0 again |
|
128 check('y1', false); // 33 |
|
129 check('y2', false); |
|
130 check('y3', false); |
|
131 check('y4', true); |
|
132 SimpleTest.finish(); |
|
133 } |
|
134 </script> |
|
135 </pre> |
|
136 <p id="display"> |
|
137 <iframe src="empty.html" id="selectors" onload="runTest()"></iframe> |
|
138 </p> |
|
139 </body> |
|
140 </html> |
|
141 |