summaryrefslogtreecommitdiffstats
path: root/layout/style/test/test_acid3_test46.html
blob: 89850f0c56d6fc537bc52c01bdb2f212cb01d472 (plain)
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=156716
-->
<!--

This is test 46 from the Acid3 test, http://acid3.acidtests.org/
extracted from the test framework there and put into Mochitest.

(from irc.mozilla.org, developers)
[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.

-->
<head>
  <title>Test for Bug 156716</title>
  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <style type="text/css">
  iframe#selectors { width: 0; height: 0; }
  </style>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=156716">Mozilla Bug 156716</a>
<div id="content" style="display: none">
  
</div>
<pre id="test">
<script class="testbody" type="text/javascript">

/** Test for Bug 156716 **/
SimpleTest.waitForExplicitFinish();
function runTest() {

  function getTestDocument() {
    var iframe = document.getElementById("selectors");
    var doc = iframe.contentDocument;
    for (var i = doc.documentElement.childNodes.length-1; i >= 0; i -= 1)
      doc.documentElement.removeChild(doc.documentElement.childNodes[i]);
    doc.documentElement.appendChild(doc.createElement('head'));
    doc.documentElement.firstChild.appendChild(doc.createElement('title'));
    doc.documentElement.appendChild(doc.createElement('body'));
    return doc;
  }

  // test 46: media queries
  var doc = getTestDocument();
  var style = doc.createElement('style');
  style.setAttribute('type', 'text/css');
  style.appendChild(doc.createTextNode('@media all and (min-color: 0) { #a { text-transform: uppercase; } }'));                         // matches
  style.appendChild(doc.createTextNode('@media not all and (min-color: 0) { #b { text-transform: uppercase; } }'));
  style.appendChild(doc.createTextNode('@media only all and (min-color: 0) { #c { text-transform: uppercase; } }'));                    // matches
  style.appendChild(doc.createTextNode('@media (bogus) { #d { text-transform: uppercase; } }'));
  style.appendChild(doc.createTextNode('@media all and (bogus) { #e { text-transform: uppercase; } }'));
  style.appendChild(doc.createTextNode('@media not all and (bogus) { #f { text-transform: uppercase; } }'));                            // matches
  style.appendChild(doc.createTextNode('@media only all and (bogus) { #g { text-transform: uppercase; } }'));
  style.appendChild(doc.createTextNode('@media (bogus), all { #h { text-transform: uppercase; } }'));                                   // matches
  style.appendChild(doc.createTextNode('@media all and (bogus), all { #i { text-transform: uppercase; } }'));                           // matches
  style.appendChild(doc.createTextNode('@media not all and (bogus), all { #j { text-transform: uppercase; } }'));                       // matches
  style.appendChild(doc.createTextNode('@media only all and (bogus), all { #k { text-transform: uppercase; } }'));                      // matches
  style.appendChild(doc.createTextNode('@media all, (bogus) { #l { text-transform: uppercase; } }'));                                   // matches
  style.appendChild(doc.createTextNode('@media all, all and (bogus) { #m { text-transform: uppercase; } }'));                           // matches
  style.appendChild(doc.createTextNode('@media all, not all and (bogus) { #n { text-transform: uppercase; } }'));                       // matches
  style.appendChild(doc.createTextNode('@media all, only all and (bogus) { #o { text-transform: uppercase; } }'));                      // matches
  style.appendChild(doc.createTextNode('@media all and color { #p { text-transform: uppercase; } }'));
  style.appendChild(doc.createTextNode('@media all and min-color: 0 { #q { text-transform: uppercase; } }'));
  style.appendChild(doc.createTextNode('@media all, all and color { #r { text-transform: uppercase; } }'));
  style.appendChild(doc.createTextNode('@media all, all and min-color: 0 { #s { text-transform: uppercase; } }'));
  style.appendChild(doc.createTextNode('@media all and min-color: 0, all { #t { text-transform: uppercase; } }'));
  style.appendChild(doc.createTextNode('@media (max-color: 0) and (max-monochrome: 0) { #u { text-transform: uppercase; } }'));
  style.appendChild(doc.createTextNode('@media (min-color: 1), (min-monochrome: 1) { #v { text-transform: uppercase; } }'));            // matches
  style.appendChild(doc.createTextNode('@media all and (min-color: 0) and (min-monochrome: 0) { #w { text-transform: uppercase; } }')); // matches
  style.appendChild(doc.createTextNode('@media not all and (min-color: 1), not all and (min-monochrome: 1) { #x { text-transform: uppercase; } }')); // matches
  style.appendChild(doc.createTextNode('@media all and (min-height: 1em) and (min-width: 1em) { #y1 { text-transform: uppercase; } }'));
  style.appendChild(doc.createTextNode('@media all and (max-height: 1em) and (min-width: 1em) { #y2 { text-transform: uppercase; } }'));
  style.appendChild(doc.createTextNode('@media all and (min-height: 1em) and (max-width: 1em) { #y3 { text-transform: uppercase; } }'));
  style.appendChild(doc.createTextNode('@media all and (max-height: 1em) and (max-width: 1em) { #y4 { text-transform: uppercase; } }')); // matches
  doc.getElementsByTagName('head')[0].appendChild(style);
  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'];
  for (var i in names) {
	var p = doc.createElement('p');
	p.id = names[i];
	doc.body.appendChild(p);
  }
  var count = 0;
  var check = function (c, e) {
	count += 1;
	var p = doc.getElementById(c);
	is(doc.defaultView.getComputedStyle(p, '').textTransform, e ? 'uppercase' : 'none', "case " + c + " failed (index " + count + ")");
  }
  check('a', true); // 1
  check('b', false);
  check('c', true);
  check('d', false);
  check('e', false);
  check('f', false); // true in old spec; commented out in real Acid3
  check('g', false);
  check('h', true);
  check('i', true);
  check('j', true); // 10
  check('k', true);
  check('l', true);
  check('m', true);
  check('n', true);
  check('o', true);
  check('p', false);
  check('q', false);
  check('r', true); // false in old spec
  check('s', true); // false in old spec
  check('t', true); // 20 - false in old spec
  check('u', false);
  check('v', true);
  check('w', true);
  check('x', true);
  // here the viewport is 0x0
  check('y1', false); // 25
  check('y2', false);
  check('y3', false);
  check('y4', true);
  document.getElementById("selectors").setAttribute("style", "height: 100px; width: 100px");
  // now the viewport is more than 1em by 1em
  check('y1', true); // 29
  check('y2', false);
  check('y3', false);
  check('y4', false);
  document.getElementById("selectors").removeAttribute("style");
  // here the viewport is 0x0 again
  check('y1', false); // 33
  check('y2', false);
  check('y3', false);
  check('y4', true);
  SimpleTest.finish();
}
</script>
</pre>
<p id="display">
  <iframe src="empty.html" id="selectors" onload="runTest()"></iframe>
</p>
</body>
</html>