← Back to branch summary

~bcsaller/juju-gui/charmFind

« back to all changes in this revision

Viewing changes to lib/yui/tests/stylesheet/tests/manual/raw.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yui/tests/stylesheet/tests/manual/raw.html
1
 
<!doctype html>
2
 
<html>
3
 
<head>
4
 
    <title>Test Page</title>
5
 
    <style type="text/css" id="styleblock" class="highlight-ignore">
6
 
        h1 {
7
 
            color: #000 !important;
8
 
            font: normal 125%/1.4 Arial, sans-serif;
9
 
        }
10
 
        .yui-skin-sam .yui-console .yui-console-content {
11
 
            font-size: 10px;
12
 
            width: 32em;
13
 
        }
14
 
        .yui-skin-sam .yui-console .yui-console-bd {
15
 
            height: 50em;
16
 
        }
17
 
        .yui-skin-sam .yui-console-entry-pass .yui-console-entry-cat {
18
 
            background: #070;
19
 
            color: #fff;
20
 
        }
21
 
        .yui-skin-sam .yui-console-entry-fail .yui-console-entry-cat {
22
 
            background: #700;
23
 
            color: #fff;
24
 
        }
25
 
        .yui3-skin-sam .yui-console-entry-time {
26
 
            display: none;
27
 
        }
28
 
    </style>
29
 
</head>
30
 
<body class="yui3-skin-sam">
31
 
<h1>Tests</h1>
32
 
<div id="testbed" style="color: #000 !important"></div>
33
 
 
34
 
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui.js"></script>
35
 
<script>
36
 
YUI({
37
 
    filter : 'raw',
38
 
    logInclude : { TestRunner: true }
39
 
}).use('test','console', function (Y) {
40
 
 
41
 
var d = document,
42
 
    Assert = Y.Assert,
43
 
    suite = new Y.Test.Suite("!important related Tests"),
44
 
    sheet,
45
 
    rules;
46
 
 
47
 
function getCssText( allRules ) {
48
 
    var content = [], rule, i, len;
49
 
 
50
 
    for ( i = 0, len = allRules.length; i < len; ++i ) {
51
 
        rule = allRules[i];
52
 
        content.push(
53
 
            (rule.selectorText || rule.tagName) +
54
 
            ' { ' + rule.style.cssText + ' } ');
55
 
    }
56
 
 
57
 
    return content;
58
 
}
59
 
 
60
 
suite.add(new Y.Test.Case({
61
 
    name: "!important",
62
 
 
63
 
    "test !important reported in cssText for <style> block": function () {
64
 
        var style = d.getElementById('styleblock'),
65
 
            sheet = style.sheet || style.styleSheet,
66
 
            rules = sheet.cssRules || sheet.rules,
67
 
            found = false,
68
 
            i;
69
 
 
70
 
        for (i = rules.length - 1; i >= 0; --i) {
71
 
            if (/important/.test(rules[i].style.cssText)) {
72
 
                found = true;
73
 
                break;
74
 
            }
75
 
        }
76
 
 
77
 
        Assert.isTrue(found);
78
 
    },
79
 
 
80
 
    "test !important reported in cssText for <h1 style=>": function () {
81
 
        var x = d.getElementById('testbed').style;
82
 
 
83
 
        Assert.isTrue(!!/important/.test(x.cssText));
84
 
 
85
 
        // Opera refreshes cssTest after a style property is changed
86
 
        x.color = '#111';
87
 
        Assert.isTrue(!!/important/.test(x.cssText));
88
 
    },
89
 
 
90
 
    "test new sheet with important": function () {
91
 
        var s = d.createElement('style'),
92
 
            css;
93
 
 
94
 
        css = "#foo { color: red !important; } #bar { height: 100px; }";
95
 
        s.type = 'text/css';
96
 
 
97
 
        if (s.styleSheet) {
98
 
            s.styleSheet.cssText = css;
99
 
        } else {
100
 
            s.appendChild( d.createTextNode(css) );
101
 
        }
102
 
 
103
 
        d.getElementsByTagName('head')[0].appendChild( s );
104
 
 
105
 
        sheet = s.sheet || s.styleSheet,
106
 
        rules = sheet.cssRules || sheet.rules;
107
 
 
108
 
        Assert.areEqual( 2, rules.length, "Missing the !important rule?" );
109
 
 
110
 
        css = getCssText( rules );
111
 
 
112
 
        Y.log( css.join("\n"), "info", "TestRunner" );
113
 
 
114
 
        Assert.isTrue( /important/i.test( css.join('') ),
115
 
            "No parsed rule reports !important in its cssText");
116
 
    },
117
 
 
118
 
    "test new rule with important": function () {
119
 
        if ( sheet.insertRule ) {
120
 
            sheet.insertRule( ".foo { background-color: #000 !important; }", 2 );
121
 
        } else {
122
 
            sheet.addRule( ".foo", "background-color: #000 !important;", 2 );
123
 
        }
124
 
 
125
 
        var css = getCssText( rules ),
126
 
            m   = css.join('').match( /important/gi ) || [];
127
 
 
128
 
        Y.log( css.join("\n"), "info", "TestRunner" );
129
 
 
130
 
        Assert.areEqual( 3, rules.length, "Missing the inserted !important rule?" );
131
 
        Assert.areEqual( 2, m.length, "Not reporting !important in the cssText" );
132
 
 
133
 
    },
134
 
 
135
 
    "test new property with important": function () {
136
 
        var rule = rules[1] || Assert.fail("Unable to find a rule");
137
 
 
138
 
        rule.style.paddingBottom = '10px !important';
139
 
 
140
 
        Y.log( getCssText( rules ).join("\n"), "info", "TestRunner" );
141
 
 
142
 
        // !important shouldn't show up in value
143
 
        Assert.areEqual( '10px', rule.style.paddingBottom );
144
 
 
145
 
        // but should be in the cssText
146
 
        Assert.isTrue(
147
 
            /padding.*?:\s*10px\s*!\s*important/i.test( rule.style.cssText ) );
148
 
    },
149
 
 
150
 
    "test existing property with important": function () {
151
 
        for ( var i = rules.length - 1, rule; i >= 0; --i ) {
152
 
            rule = rules[i];
153
 
 
154
 
            if ( /bar/.test( rule.selectorText ) ) {
155
 
                rule.style.height = '5em !important';
156
 
 
157
 
                Y.log( getCssText( rules ).join("\n"), "info", "TestRunner" );
158
 
 
159
 
                // !important shouldn't show up in value
160
 
                Assert.areEqual( '5em', rule.style.height );
161
 
 
162
 
                // but should be in the cssText
163
 
                Assert.isTrue(
164
 
                    /height.*?:\s*5em\s*!\s*important/i.test(
165
 
                        rule.style.cssText ) );
166
 
 
167
 
                break;
168
 
            }
169
 
        }
170
 
    },
171
 
 
172
 
    "test set property with important via cssText": function () {
173
 
        var p = d.createElement('p');
174
 
 
175
 
        p.style.cssText = 'text-align: right !important';
176
 
 
177
 
        Y.log( getCssText( [p] ).join("\n"), "info", "TestRunner" );
178
 
 
179
 
        // !important should not show up in property value
180
 
        Assert.areEqual( 'right', p.style.textAlign );
181
 
 
182
 
        // but it should in cssText
183
 
        Assert.isTrue(
184
 
            /text-align\s*:\s*right !\s*important/i.test(p.style.cssText) );
185
 
 
186
 
        // Opera refreshes cssTest after a style property is changed
187
 
        p.style.color = '#111';
188
 
        Assert.isTrue(
189
 
            /text-align\s*:\s*right !\s*important/i.test(p.style.cssText) );
190
 
    },
191
 
 
192
 
    "test off dom style property with important": function () {
193
 
        var p = d.createElement('p');
194
 
 
195
 
        p.style.color = '#000';
196
 
        p.style.textAlign = 'right !important';
197
 
 
198
 
        Y.log( getCssText( [p] ).join("\n"), "info", "TestRunner" );
199
 
 
200
 
        // !important should not show up in property value
201
 
        Assert.areEqual( 'right', p.style.textAlign );
202
 
 
203
 
        // but it should in cssText
204
 
        Assert.isTrue(
205
 
            /text-align\s*:\s*right !\s*important/i.test(p.style.cssText),
206
 
            "value containing !important did not update cssText with !important");
207
 
    },
208
 
 
209
 
    "test on dom style property with important": function () {
210
 
        d.body.style.color = '#000';
211
 
        d.body.style.textAlign = 'right !important';
212
 
 
213
 
        Y.log( getCssText( [d.body] ).join("\n"), "info", "TestRunner" );
214
 
 
215
 
        // !important should not show up in property value
216
 
        Assert.areEqual( 'right', d.body.style.textAlign );
217
 
 
218
 
        // but it should in cssText
219
 
        Assert.isTrue(
220
 
            /text-align\s*:\s*right !\s*important/i.test(d.body.style.cssText),
221
 
            "value containing !important did not update cssText with !important");
222
 
    },
223
 
 
224
 
    "test setProperty + getPropertyPriority": function () {
225
 
        d.body.style.setProperty("color", "#555", "important");
226
 
 
227
 
        Assert.areEqual("important", d.body.style.getPropertyPriority("color"));
228
 
    },
229
 
 
230
 
    "test style.prop = x + getPropertyPriority": function () {
231
 
        d.body.style.paddingLeft = "3px !important";
232
 
 
233
 
        Assert.areEqual("important", d.body.style.getPropertyPriority("padding-left"));
234
 
    }
235
 
}));
236
 
        
237
 
var yconsole = new Y.Console({
238
 
    contentBox:"log",
239
 
    newestOnTop: false,
240
 
    height: '600px'
241
 
}).render();
242
 
 
243
 
Y.Test.Runner.add(suite);
244
 
 
245
 
Y.Test.Runner.run();
246
 
 
247
 
});
248
 
</script>
249
 
</body>
250
 
</html>