forked from jeresig/env-js
/
scope.js
190 lines (153 loc) · 6.83 KB
/
scope.js
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
/*
* This file is a component of env.js,
* http://github.com/gleneivey/env-js/commits/master/README
* a Pure JavaScript Browser Environment
* Copyright 2009 John Resig, licensed under the MIT License
* http://www.opensource.org/licenses/mit-license.php
*/
module("scope");
// 'window.js' is responsible for verifying that the JS interpreter's scope
// behaves correctly for code in top-level (first to load) document. Most
// of the tests in 'frame.js' will fail if the global/window object and
// scoping in (i)frames isn't distinct from that of the main document.
// The tests here check the scoping of variables and code loaded in
// event handlers (page-global and attribute-assigned), as well as
// confirming the independence of scoping in frames.
var __click__ = function(element){
var event = new Event({
target:element,
currentTarget:element
});
event.initEvent("click");
element.dispatchEvent(event);
};
// this test depends on 'iframe1.html' having been loaded into 'index.html's
// 'loadediframe' element (and not modified prior to this test's execution)
test("Global scope for JS code in an iframe refers to that iframe's window/document", function() {
expect(3);
var idoc = document.getElementById('loadediframe').contentDocument;
var mtch = idoc.getElementById('js_generated_p').innerHTML.match(/Dynamic/);
try{ ok(mtch && mtch.length > 0,
"Can get content from dynamically-generate p element");
}catch(e){print(e);}
mtch = idoc.getElementById('internalDocRefResult').innerHTML.
match(/exists-found/);
try{ ok(mtch && mtch.length > 0,
"Got confirmation of access to 'document' object in iframe");
}catch(e){print(e);}
mtch = idoc.getElementById('appended').innerHTML.match(/appended para/);
try{ ok(mtch && mtch.length > 0,
"Got confirmation of body-onload execution in iframe");
}catch(e){print(e);}
});
// the following tests depend on '../html/scope.html' being loaded into
// the iframe 'scopeFrame' in the page /index.html'. Each test must only
// execute once. Otherwise, there are no test order dependencies
// except those noted on individual tests.
test("Event handler attribute has access to (correct) 'document'", function() {
expect(2);
// test: img1.onclick creates p1
var idoc = document.getElementById('scopeFrame').contentDocument;
var mtch = idoc.getElementById('p1');
try{ ok(mtch == undefined || mtch == null,
"img1 event handler didn't execute early");
}catch(e){print(e);}
var img1 = idoc.getElementById('img1');
__click__(img1);
mtch = idoc.getElementById('p1').innerHTML.match(/img1 click/);
try{ ok(mtch && mtch.length > 0,
"img1 event handler executed correctly");
}catch(e){print(e);}
});
test("Event handler attribute has access to (correct) 'this'", function() {
expect(2);
// test: div1.onclick creates p2
var idoc = document.getElementById('scopeFrame').contentDocument;
var mtch = idoc.getElementById('p2');
try{ ok(mtch == undefined || mtch == null,
"div1 event handler didn't execute early");
}catch(e){print(e);}
var div1 = idoc.getElementById('div1');
__click__(div1);
mtch = idoc.getElementById('p2').innerHTML.match(/div1 click/);
try{ ok(mtch && mtch.length > 0,
"div1 event handler executed correctly");
}catch(e){print(e);}
});
test("Event handler attribute has enclosing HTML elements in scope chain",
function() {
expect(2);
// test: text1.onchange creates p3 containing values from several elements
var idoc = document.getElementById('scopeFrame').contentDocument;
var mtch = idoc.getElementById('p3');
try{ ok(mtch == undefined || mtch == null,
"text1 event handler didn't execute early");
}catch(e){print(e);}
text1 = idoc.getElementById('text1');
text1.focus();
text1.value = "a New Input Value";
text1.blur(); // "Dynamic HTML: TDR" 2nd says onchange fires@loss focus
var goodRE = /components: --a New Input Value-- --text-- --42-- --post-url-- --center--/;
mtch = idoc.getElementById('p3').innerHTML.match(goodRE);
try{ ok(mtch && mtch.length > 0,
"text1 event handler executed correctly");
}catch(e){print(e);}
});
test("Handler defined in frame lexically scopes to frame", function() {
expect(3);
aVar = "very bad"; // handler must not pick up this version of 'aVar'
// test: div2.onclick creates paragraph 'lex' at end of div2
var idoc = document.getElementById('scopeFrame').contentDocument;
var lex = idoc.getElementById('lex');
try{ ok(lex == undefined || lex == null,
"div2 click handler didn't execute early");
}catch(e){print(e);}
var div2 = idoc.getElementById('div2');
__click__(div2);
lex = idoc.getElementById('lex');
mtch = lex.innerHTML.match(/Lexical scoping is Overridden/);
try{ ok(mtch && mtch.length > 0,
"div2 click handler generated correct content");
}catch(e){print(e);}
try{ ok(div2 == lex.parentNode,
"div2 click handler generated p in correct location");
}catch(e){print(e);}
});
test("In-frame object-assigned handler scopes to frame", function() {
expect(2);
// test: div3.onclick creates a p with values from iframe's global scope
var idoc = document.getElementById('scopeFrame').contentDocument;
var p4 = idoc.getElementById('p4');
var mtch = p4.innerHTML.match(/Third sentence/);
try{ ok(mtch == undefined || mtch == null || mtch.length == 0,
"div3 event handler didn't execute early");
}catch(e){print(e);}
bVar = 13; // handler shouldn't pick up this version of 'bVar';
__click__(p4); // should bubble to div3 and handler
mtch = p4.innerHTML.match(/number 42/);
try{ ok(mtch && mtch.length > 0,
"div3 event handler executed correctly");
}catch(e){print(e);}
});
// this test reassigns div3.onclick, so must follow all other div3 tests
test("Handler defined in root lexically scopes to root", function() {
expect(2);
// test: create an onclick fn in this scope, attach/execute in iframe
var idoc = document.getElementById('scopeFrame').contentDocument;
var p4 = idoc.getElementById('p4');
var checkValue = "contains good text";
idoc.getElementById('div3').onclick = function(){
p4.appendChild(idoc.createTextNode(
" Fourth sentence " + checkValue + "."));
}
var mtch = p4.innerHTML.match(/Fourth sentence/);
try{ ok(mtch == undefined || mtch == null || mtch.length == 0,
"new div3 event handler didn't execute early");
}catch(e){print(e);}
var div3 = idoc.getElementById('div3');
__click__(div3);
mtch = p4.innerHTML.match(/contains good text/);
try{ ok(mtch && mtch.length > 0,
"new div3 event handler executed correctly");
}catch(e){print(e);}
});