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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
|
<!DOCTYPE html>
<html>
<!--
Copyright 2008 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<!--
-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Closure Unit Tests - CSS Object Model helper</title>
<script src="../base.js"></script>
<script>
goog.require('goog.array');
goog.require('goog.cssom');
goog.require('goog.testing.jsunit');
goog.require('goog.userAgent');
</script>
</head>
<link rel="stylesheet" type="text/css" href="cssom_test_link_1.css">
<style>
/* This will import css_test_import_1 and css_test_import_2 */
@import "cssom_test_import_1.css?cachebust=1";
.css-style-1 {
display: block;
}
.css-style-2 {
display: block;
}
.css-style-3 {
display: block;
}
</style>
<body>
<script>
// Since sheet cssom_test1.css's first line is to import
// cssom_test2.css, we should get 2 before one in the string.
var cssText = '.css-link-1 { display: block; } ' +
'.css-import-2 { display: block; } ' +
'.css-import-1 { display: block; } ' +
'.css-style-1 { display: block; } ' +
'.css-style-2 { display: block; } ' +
'.css-style-3 { display: block; }';
var replacementCssText = '.css-repl-1 { display: block; }';
var isIe7 = goog.userAgent.IE &&
(goog.userAgent.compare(goog.userAgent.VERSION, '7.0') == 0);
// We're going to toLowerCase cssText before testing, because IE returns
// CSS property names in UPPERCASE, and the function shouldn't
// "fix" the text as it would be expensive and rarely of use.
// Same goes for the trailing whitespace in IE.
// Same goes for fixing the optimized removal of trailing ; in rules.
// Also needed for Opera.
function fixCssTextForIe(cssText) {
cssText = cssText.toLowerCase().replace(/\s*$/, '');
if (cssText.match(/[^;] \}/)) {
cssText = cssText.replace(/([^;]) \}/g, '$1; }');
}
return cssText;
}
function testGetFileNameFromStyleSheet() {
var styleSheet = {'href': 'http://foo.com/something/filename.css'};
assertEquals('filename.css',
goog.cssom.getFileNameFromStyleSheet(styleSheet));
styleSheet = {'href': 'https://foo.com:123/something/filename.css'};
assertEquals('filename.css',
goog.cssom.getFileNameFromStyleSheet(styleSheet));
styleSheet = {'href': 'http://foo.com/something/filename.css?bar=bas'};
assertEquals('filename.css',
goog.cssom.getFileNameFromStyleSheet(styleSheet));
styleSheet = {'href': 'filename.css?bar=bas'};
assertEquals('filename.css',
goog.cssom.getFileNameFromStyleSheet(styleSheet));
styleSheet = {'href': 'filename.css'};
assertEquals('filename.css',
goog.cssom.getFileNameFromStyleSheet(styleSheet));
}
function testGetAllCssStyleSheets() {
var styleSheets = goog.cssom.getAllCssStyleSheets();
assertEquals(4, styleSheets.length);
// Makes sure they're in the right cascade order.
assertEquals('cssom_test_link_1.css',
goog.cssom.getFileNameFromStyleSheet(styleSheets[0]));
assertEquals('cssom_test_import_2.css',
goog.cssom.getFileNameFromStyleSheet(styleSheets[1]));
assertEquals('cssom_test_import_1.css',
goog.cssom.getFileNameFromStyleSheet(styleSheets[2]));
// Not an external styleSheet
assertNull(goog.cssom.getFileNameFromStyleSheet(styleSheets[3]));
}
function testGetAllCssText() {
var allCssText = goog.cssom.getAllCssText();
// In IE7, a CSSRule object gets included twice and replaces another
// existing CSSRule object. We aren't using
// goog.testing.ExpectedFailures since it brings in additional CSS
// which breaks a lot of our expectations about the number of rules
// present in a style sheet.
if (!isIe7) {
assertEquals(cssText, fixCssTextForIe(allCssText));
}
}
function testGetAllCssStyleRules() {
var allCssRules = goog.cssom.getAllCssStyleRules();
assertEquals(6, allCssRules.length);
}
function testAddCssText() {
var newCssText = '.css-add-1 { display: block; }';
var newCssNode = goog.cssom.addCssText(newCssText);
assertEquals(document.styleSheets.length, 3);
var allCssText = goog.cssom.getAllCssText();
// In IE7, a CSSRule object gets included twice and replaces another
// existing CSSRule object. We aren't using
// goog.testing.ExpectedFailures since it brings in additional CSS
// which breaks a lot of our expectations about the number of rules
// present in a style sheet.
if (!isIe7) {
// Opera inserts the CSSRule to the first position. And fixCssText
// is also needed to clean up whitespace.
if (goog.userAgent.OPERA) {
assertEquals(newCssText + ' ' + cssText,
fixCssTextForIe(allCssText));
} else {
assertEquals(cssText + ' ' + newCssText,
fixCssTextForIe(allCssText));
}
}
var cssRules = goog.cssom.getAllCssStyleRules();
assertEquals(7, cssRules.length);
// Remove the new stylesheet now so it doesn't interfere with other
// tests.
newCssNode.parentNode.removeChild(newCssNode);
// Sanity check.
cssRules = goog.cssom.getAllCssStyleRules();
assertEquals(6, cssRules.length);
}
function testAddCssRule() {
// test that addCssRule correctly adds the rule to the style
// sheet.
var styleSheets = goog.cssom.getAllCssStyleSheets();
var styleSheet = styleSheets[3];
var newCssRule = '.css-addCssRule { display: block; }';
var rules = styleSheet.rules || styleSheet.cssRules;
var origNumberOfRules = rules.length;
goog.cssom.addCssRule(styleSheet, newCssRule, 1);
rules = styleSheet.rules || styleSheet.cssRules;
var newNumberOfRules = rules.length;
assertEquals(newNumberOfRules, origNumberOfRules + 1);
// Remove the added rule so we don't mess up other tests.
goog.cssom.removeCssRule(styleSheet, 1);
}
function testAddCssRuleAtPos() {
// test that addCssRule correctly adds the rule to the style
// sheet at the specified position.
var styleSheets = goog.cssom.getAllCssStyleSheets();
var styleSheet = styleSheets[3];
var newCssRule = '.css-addCssRulePos { display: block; }';
var rules = styleSheet.rules || styleSheet.cssRules;
var origNumberOfRules = rules.length;
// Firefox croaks if we try to insert a CSSRule at an index that
// contains a CSSImport Rule. Since we deal only with CSSStyleRule
// objects, we find the first CSSStyleRule and return its index.
//
// NOTE(user): We could have unified the code block below for all
// browsers but IE6 horribly mangled up the stylesheet by creating
// duplicate instances of a rule when removeCssRule was invoked
// just after addCssRule with the looping construct in. This is
// perfectly fine since IE's styleSheet.rules does not contain
// references to anything but CSSStyleRules.
var pos = 0;
if (!goog.userAgent.IE) {
pos = goog.array.findIndex(rules, function(rule) {
return rule.type == goog.cssom.CssRuleType.STYLE;
});
}
goog.cssom.addCssRule(styleSheet, newCssRule, pos);
rules = styleSheet.rules || styleSheet.cssRules;
var newNumberOfRules = rules.length;
assertEquals(newNumberOfRules, origNumberOfRules + 1);
// Remove the added rule so we don't mess up other tests.
goog.cssom.removeCssRule(styleSheet, pos);
rules = styleSheet.rules || styleSheet.cssRules;
assertEquals(origNumberOfRules, rules.length);
}
function testAddCssRuleNoIndex() {
// How well do we handle cases where the optional index is
// not passed in?
var styleSheets = goog.cssom.getAllCssStyleSheets();
var styleSheet = styleSheets[3];
var rules = styleSheet.rules || styleSheet.cssRules;
var origNumberOfRules = rules.length;
var newCssRule = '.css-addCssRuleNoIndex { display: block; }';
// Try inserting the rule without specifying an index.
// Make sure we don't throw an exception, and that we added
// the entry.
goog.cssom.addCssRule(styleSheet, newCssRule);
rules = styleSheet.rules || styleSheet.cssRules;
var newNumberOfRules = rules.length;
assertEquals(newNumberOfRules, origNumberOfRules + 1);
// Remove the added rule so we don't mess up the other tests.
goog.cssom.removeCssRule(styleSheet, newNumberOfRules - 1);
rules = styleSheet.rules || styleSheet.cssRules;
assertEquals(origNumberOfRules, rules.length);
}
function testGetParentStyleSheetAfterGetAllCssStyleRules() {
var cssRules = goog.cssom.getAllCssStyleRules();
var cssRule = cssRules[4];
var parentStyleSheet = goog.cssom.getParentStyleSheet(cssRule);
var styleSheets = goog.cssom.getAllCssStyleSheets();
var styleSheet = styleSheets[3];
assertEquals(styleSheet, parentStyleSheet);
}
function testGetCssRuleIndexInParentStyleSheetAfterGetAllCssStyleRules() {
var cssRules = goog.cssom.getAllCssStyleRules();
var cssRule = cssRules[4];
// Note here that this is correct - IE's styleSheet.rules does not
// contain references to anything but CSSStyleRules while FF and others
// include anything that inherits from the CSSRule interface.
// See http://dev.w3.org/csswg/cssom/#cssrule.
var ruleIndex = goog.userAgent.IE ? 1 : 2;
assertEquals(ruleIndex,
goog.cssom.getCssRuleIndexInParentStyleSheet(cssRule));
}
function testGetCssRuleIndexInParentStyleSheetNonStyleRule() {
// IE's styleSheet.rules only contain CSSStyleRules.
if (!goog.userAgent.IE) {
var styleSheets = goog.cssom.getAllCssStyleSheets();
var styleSheet = styleSheets[3];
var newCssRule = '@media print { .css-nonStyle { display: block; } }';
goog.cssom.addCssRule(styleSheet, newCssRule);
var rules = styleSheet.rules || styleSheet.cssRules;
var cssRule = rules[rules.length - 1];
assertEquals(goog.cssom.CssRuleType.MEDIA, cssRule.type);
// Make sure we don't throw an exception.
goog.cssom.getCssRuleIndexInParentStyleSheet(cssRule, styleSheet);
// Remove the added rule.
goog.cssom.removeCssRule(styleSheet, rules.length - 1);
}
}
// Tests the scenario where we have a known stylesheet and index.
function testReplaceCssRuleWithStyleSheetAndIndex() {
var styleSheets = goog.cssom.getAllCssStyleSheets();
var styleSheet = styleSheets[3];
var rules = goog.cssom.getCssRulesFromStyleSheet(styleSheet);
var index = 2;
var origCssRule = rules[index];
var origCssText =
fixCssTextForIe(goog.cssom.getCssTextFromCssRule(origCssRule));
goog.cssom.replaceCssRule(origCssRule, replacementCssText, styleSheet,
index);
var rules = goog.cssom.getCssRulesFromStyleSheet(styleSheet);
var newCssRule = rules[index];
var newCssText = goog.cssom.getCssTextFromCssRule(newCssRule);
assertEquals(replacementCssText, fixCssTextForIe(newCssText));
// Now we need to re-replace our rule, to preserve parity for the other
// tests.
goog.cssom.replaceCssRule(newCssRule, origCssText, styleSheet, index);
var rules = goog.cssom.getCssRulesFromStyleSheet(styleSheet);
var nowCssRule = rules[index];
var nowCssText = goog.cssom.getCssTextFromCssRule(nowCssRule);
assertEquals(origCssText, fixCssTextForIe(nowCssText));
}
function testReplaceCssRuleUsingGetAllCssStyleRules() {
var cssRules = goog.cssom.getAllCssStyleRules();
var origCssRule = cssRules[4];
var origCssText =
fixCssTextForIe(goog.cssom.getCssTextFromCssRule(origCssRule));
// notice we don't pass in the stylesheet or index.
goog.cssom.replaceCssRule(origCssRule, replacementCssText);
var styleSheets = goog.cssom.getAllCssStyleSheets();
var styleSheet = styleSheets[3];
var rules = goog.cssom.getCssRulesFromStyleSheet(styleSheet);
var index = goog.userAgent.IE ? 1 : 2;
var newCssRule = rules[index];
var newCssText =
fixCssTextForIe(goog.cssom.getCssTextFromCssRule(newCssRule));
assertEquals(replacementCssText, newCssText);
// try getting it the other way around too.
var cssRules = goog.cssom.getAllCssStyleRules();
var newCssRule = cssRules[4];
var newCssText =
fixCssTextForIe(goog.cssom.getCssTextFromCssRule(newCssRule));
assertEquals(replacementCssText, newCssText);
// Now we need to re-replace our rule, to preserve parity for the other
// tests.
goog.cssom.replaceCssRule(newCssRule, origCssText);
var cssRules = goog.cssom.getAllCssStyleRules();
var nowCssRule = cssRules[4];
var nowCssText =
fixCssTextForIe(goog.cssom.getCssTextFromCssRule(nowCssRule));
assertEquals(origCssText, nowCssText);
}
</script>
</body>
</html>
|
