Context Navigation

test_set.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 35.9 KB

Line
1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2	"http://www.w3.org/TR/html4/strict.dtd">
3	<html>
4	<head>
5	<title>dojox.html.set test</title>
6	<script>
7	var isIE;
8	function fixPngIE6(){
9	if(this.complete && isIE < 7){
10	var r = this.runtimeStyle;
11	if(/.png$/i.test(this.src)){
12	r.height = this.height;
13	r.width = this.width;
14	r.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.src+"');";
15	this.src = this.currentStyle.backgroundImage.replace(/url$\s['"]?(.+?)['"]?\s$/, "$1");
16	}
17	this.className = this.className.replace('run_png_fix', "");
18	r.behaviour = 'none';
19	}
20	}
21	</script>
22	<style type='text/css'>
23	.run_png_fix {
24	background-image:url(images/blank.gif);
25	behaviour: expression(fixPngIE6.call(this));
26	}
27	</style>
28	<script src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad:true, async:true"></script>
29	<script>
30	// used to test if we fire scrips to document scope
31	function documentCallback(){
32	arguments.callee.reached = true;
33	//console.debug('reached');
34	};
35	var unTypedVarInDocScope; // a closure test to make sure we can reach this from evaled scripts
36
37	require([
38	"doh/runner",
39	"dojo/dom",
40	"dojo/dom-geometry",
41	"dojo/dom-style",
42	"dojo/_base/lang",
43	"dojo/parser",
44	"dojo/ready",
45	"dojo/sniff",
46	"dojo/_base/url",
47	"dojo/_base/xhr",
48	"dojox/html", // the module we are testing
49	"dojo/domReady!"
50	], function(doh, dom, domGeom, domStyle, lang, parser, ready, has, _Url, xhr, html){
51
52	// Used by fixPngIE6() above
53	isIE = has("ie");
54
55	var node1, setter1, setter2;
56
57	/*
58	These tests are largely borrowed from dojox.layout.ContentPane's testsuite
59	They provide coverage for the basic use of the:
60	adjustPaths, renderStyles, executeScripts and referencePath properties
61
62	We also need to test a couple other scenarios that dojox.html.set allows for:
63	Reuse of a Setter across different node contexts
64	*/
65
66	node1 = dom.byId('node1');
67	setter1 = new html._ContentSetter({
68	node: node1
69	});
70
71	doh.register("basicChecks", [
72	{
73	name: 'setContent',
74	runTest: function(t){
75	// test that setContent on a simple node does in fact set it
76	console.log("basicChecks: " + this.name);
77	var msg = "Simple Test";
78
79	html.set(node1, msg);
80	t.assertEqual(msg, node1.innerHTML);
81	console.log("/basicChecks: " + this.name);
82	}
83	}
84	]);
85
86	doh.register("pathAdjustments", [
87	{
88	setUp: function() {
89	// setup text fixture for these pathAdjustments tests
90	// we use a _Setter instance rather than dojox.html.set
91	// as the tests include successive sets and depend on prior settings and results
92	setter2 = new html._ContentSetter({ node: node1 });
93
94	},
95	name: 'cssPathAdjustments',
96	runTest: function(t){
97	// test that when you setContent, using the adjustPaths and renderStyles options
98	// the paths in the css are corrected for the current document
99	console.log("pathAdjustments: " + this.name);
100
101	// we do this test as one big string to emulate as good as possible,
102	// but split it later to easily see where we failed
103	var cssText = ".easy{ background-image:url(images/image.png) }\n"
104	+".dontReplaceEasy{ background-image:url(images/images/image.png) }\n"
105	+".hardurl{background-image:url(\t \"../../source/~test/%20t'e(s)t.gif(\"1')?foo=bar11103&bar=baz-foo\" \t);}body{};\n"
106	+".file{background-image: url(file:///home/nobody/image.png);}\n"
107	+".http{background-image: url(http://dojotoolkit.org/image.png);}\n"
108	+".https{background-image: url(https://dojotoolkit.org/image.png);}\n"
109	+".nonRelative{background-image:url(/toplevelfolder/image.gif);}\n"
110	+'@import "css/main.css";' + "\n@import \t'css/Newbee Url.css'\t;\n"
111	+"@import 'http://dojotoolkit.org/dojo.css';\n"
112	+" @import 'you/never/thought/' print;\n"
113	+' @import url("it/would/work") tv, screen;'+"\n"
114	+' @import url(/did/you/now.css);'+"\n"
115	+' @import "yes.i.did";';
116
117	var setParams = {
118	referencePath: "deep/nested/file",
119	adjustPaths: 1,
120	renderStyles: 1
121	};
122
123	var adjustedCss;
124
125	// hijack internals to snatch the styles before they are inserted to DOM (DOM messes formating)
126	var oldFunc = setter2._renderStyles;
127	console.log("in cssPathAdjustments, returning function");
128
129	setter2._renderStyles = function(styles){
130	adjustedCss = styles.join();
131	};
132	console.log("in cssPathAdjustments, calling set");
133	setter2.set('<style>'+cssText+'</style>', setParams);
134	console.log("in cssPathAdjustments, done calling set");
135
136	setter2._renderStyles = oldFunc;
137
138	adjustedCss = adjustedCss.split("\n");
139
140	var expectedCss = (".easy{ background-image:url(deep/nested/images/image.png) }\n"
141	+".dontReplaceEasy{ background-image:url(deep/nested/images/images/image.png) }\n"
142	+".hardurl{background-image:url(source/~test/%20t'e(s)t.gif(\"1')?foo=bar11103&bar=baz-foo);}body{};\n"
143	+".file{background-image: url(file:///home/nobody/image.png);}\n"
144	+".http{background-image: url(http://dojotoolkit.org/image.png);}\n"
145	+".https{background-image: url(https://dojotoolkit.org/image.png);}\n"
146	+".nonRelative{background-image:url(/toplevelfolder/image.gif);}\n"
147	+"@import \"deep/nested/css/main.css\";\n@import \"deep/nested/css/Newbee Url.css\"\t;\n"
148	+"@import 'http://dojotoolkit.org/dojo.css';\n"
149	+" @import \"deep/nested/you/never/thought/\" print;\n"
150	+' @import url(deep/nested/it/would/work) tv, screen;'+"\n"
151	+' @import url(/did/you/now.css);'+"\n"
152	+' @import "deep/nested/yes.i.did";').split("\n");
153
154	// we split and loop to get a faster hint of where it failed
155	for(var i = 0; i < expectedCss.length; i++){
156	t.assertEqual(expectedCss[i], adjustedCss[i]);
157	}
158	},
159	tearDown: function(){
160	delete setter2.adjustPaths; // get back to defaults
161	delete setter2.renderStyles;
162	}
163	},
164	{
165	name: 'htmlPathAdjustments',
166	timeout: 1800,
167	runTest: function(t){
168	console.log("pathAdjustments: " + this.name);
169	var d = new t.Deferred();
170	setTimeout(d.getTestCallback(
171	function(){
172	console.log("pathAdjustments: htmlPathAdjustments, in callback");
173	console.log("executeScripts: %s, cleanContent: %s, referencePath: %s, renderStyles: %s", setter2.executeScripts, setter2.cleanContent, setter2.referencePath, setter2.renderStyles);
174	// check that images and styles have been applied
175	var cb = domGeom.getContentBox(dom.byId('imgTest'));
176	//domStyle.getComputedStyle(dom.byId('imgTest'));
177	t.assertEqual(188, cb.w);
178	t.assertEqual(125, cb.h);
179
180	// make sure we didn't mess up the other inline styles
181	cb = domGeom.getContentBox(dom.byId('inlineStyleTest'));
182	t.assertEqual(188, cb.w);
183	t.assertEqual(125, cb.h);
184
185	// make sure it is the correct image
186	var cs = domStyle.getComputedStyle(dom.byId('inlineStyleTest'));
187	var url = cs.backgroundImage;
188	//remove url(..)
189	url = url.replace(/^\s?url$['"]?/, "").replace(/['"]?$;?\s?$/, "");
190	// compare image url to full path of this document
191	imageUrl = require.toUrl("dojox/html/tests/images/testImage.gif");
192	t.assertEqual(new _Url(document.location, imageUrl).toString(), url);
193
194	// make sure we loaded the <link rel='stylesheet' correctly
195	var mb = domGeom.getMarginBox(dom.byId('linkCssTest'));
196	t.assertEqual(112, mb.w); // 100px + 2px border + 4px margin = 112px
197	t.assertEqual(112, mb.h);
198
199	// make sure we loaded the <style>@import '...'; correctly
200	mb = domGeom.getMarginBox(dom.byId('importCssTest'));
201	t.assertEqual(110, mb.w); // 100px + 1px border + 4px margin = 110px
202	t.assertEqual(110, mb.h);
203
204	// make sure we didn't render the <link media='print' rel='stylesheet'
205	var mb = domGeom.getMarginBox(dom.byId('linkMediaTest'));
206	t.assertEqual(212, mb.w); // 100px + 2px border + 4px margin = 112px
207	t.assertEqual(212, mb.h);
208
209	// make sure we didn't render the <style media='print'>@import '...';
210	mb = domGeom.getMarginBox(dom.byId('importMediaTest'));
211	t.assertEqual(210, mb.w); // 100px + 1px border + 4px margin = 110px
212	t.assertEqual(210, mb.h);
213	console.log("/pathAdjustments: htmlPathAdjustments, in callback");
214	}
215	), 1500);
216
217	console.log("pathAdjustments: " + this.name + ": requesting content");
218	var remoteUrl = require.toUrl("dojox/html/tests/remote/getResponse.php?mode=htmlPaths");
219
220	xhr.get({
221	url: remoteUrl,
222	load: function(data) {
223	console.log("pathAdjustments: htmlPathAdjustments, handling response");
224	setter2.set(data, {
225	adjustPaths: 1,
226	referencePath: remoteUrl.toString(),
227	renderStyles: 1
228	});
229	console.log("/pathAdjustments: htmlPathAdjustments, handling response");
230	}
231	});
232	return d;
233	},
234	tearDown: function(){
235	delete setter2.adjustPaths; // get back to defaults
236	delete setter2.renderStyles;
237	}
238	},
239	{
240	name: 'renderStylesOfByDefaultAndOldDeleted',
241	timeout: 1800,
242	runTest: function(t){
243	var d = new t.Deferred();
244	console.log("pathAdjustments: " + this.name);
245
246	setTimeout(d.getTestCallback(
247	function(){
248	// innerHTML'ing <link tags works in some browser (IE, moz), but not all
249	// we can't test if LINK was loaded this way
250
251	// make sure we didn't load the <link rel='stylesheet'
252	//var mb = domGeom.getMarginBox(dom.byId('linkCssTest'));
253	//t.assertFalse(112 == mb.w);
254	//t.assertFalse(112 == mb.h);
255
256	// make sure we didn't load the <style>@import '...';
257	var mb = domGeom.getMarginBox(dom.byId('importCssTest'));
258	t.assertFalse(110 == mb.w);
259	t.assertFalse(110 == mb.h);
260	}
261	), 1500);
262
263	var remoteUrl = require.toUrl("dojox/html/tests/remote/getResponse.php?mode=htmlPaths");
264	xhr.get({
265	url: remoteUrl,
266	load: function(data) {
267	console.log("pathAdjustments: renderStylesOfByDefaultAndOldDeleted, handling response");
268	setter2.set(data, {
269	adjustPaths: 1,
270	referencePath: remoteUrl.toString()
271	});
272	console.log("/pathAdjustments: htmlPathAdjustments, handling response");
273	}
274	});
275	return d;
276	},
277	tearDown: function(){
278	delete setter2.adjustPaths;
279	}
280	}
281	]);
282
283	doh.register("scriptTests", [
284	{
285	name: 'leaveDojoMethodScriptsAsIs',
286	runTest: function(t){
287	console.log("scriptTests: " + this.name);
288	html.set(node1,
289	"<"
290	+"script type='dojo/method'>unTypedVarInDocScope = 'failure';<"
291	+"/script>",
292	{
293	executeScripts: true
294	}
295	);
296
297	var d = new t.Deferred();
298	// IE req to async this test
299	setTimeout(d.getTestCallback(function(){
300	t.assertEqual('undefined', typeof unTypedVarInDocScope);
301	t.assertFalse(unTypedVarInDocScope == 'failure');
302	}), 40);
303
304	return d;
305	}
306	},
307	{
308	name: 'scripts_evals_in_global_scope',
309	timeout: 1800, // grabing remote js, wait for that
310	runTest: function(t){
311	console.log("scriptTests: " + this.name);
312	var remoteUrl = require.toUrl("dojox/html/tests/remote/getResponse.php?mode=remoteJsTrue");
313	html.set(
314	node1,
315	"<"
316	+"script>function scriptsInGlobalClicked(){ documentCallback(); }<"
317	+"/script><"+"script src='" + remoteUrl +"'></"
318	+"script>"+"<a href='javascript:scriptsInGlobalClicked()' "
319	+"onfocus='scriptsInGlobalClicked();' id='anchorTag'>test</a>",
320	{
321	executeScripts: true
322	}
323	);
324
325	var link = dom.byId('anchorTag');
326	typeof link.click == "function" ? /others/ link.click() : /moz/ link.focus();
327	var d = new t.Deferred();
328
329	setTimeout(d.getTestCallback(function(){
330	t.assertEqual('boolean', typeof documentCallback.reached);
331	t.assertTrue(documentCallback.reached);
332	t.assertTrue(unTypedVarInDocScope);
333	}), 400);
334	return d;
335	}
336	},
337	{
338	name:'scriptsEvalsInOrder',
339	timeout: 1800,// grabing remote js, wait for that
340	runTest: function(t){
341	console.log("scriptTests: " + this.name);
342	var remoteUrl = require.toUrl("dojox/html/tests/remote/getResponse.php?mode=remoteJsFalse");
343	html.set(node1, "<"
344	+"script src='"+ remoteUrl +"'><"
345	+"/script><"+"script>unTypedVarInDocScope = 1;<"
346	+"/script>",
347	{
348	executeScripts: true
349	}); // scripts only test
350
351	// we need to make this async because of IEs strange events loops
352	var d = new t.Deferred();
353	setTimeout(d.getTestCallback(function(){
354	t.assertEqual('number', typeof unTypedVarInDocScope);
355	t.assertEqual(1, unTypedVarInDocScope);
356	}), 40);
357	return d;
358	}
359	},
360	{
361	name: 'scriptsWithTypeTextJavascript',
362	runTest: function(t){
363	console.log("scriptTests: " + this.name);
364	html.set(node1, "<"
365	+"script type='text/javascript'> unTypedVarInDocScope = 'text/javascript'; <"
366	+"/script>", {
367	executeScripts: true
368	}
369	);
370
371	var d = new t.Deferred();
372	// IE needs async here
373	setTimeout(d.getTestCallback(function(){
374	t.assertEqual('text/javascript', unTypedVarInDocScope);
375	}), 40);
376	return d;
377	}
378	},
379	{
380	name:'scriptsWithHtmlComments',
381	runTest: function(t){
382	html.set(node1, "<"
383	+"script><!-- unTypedVarInDocScope = 2; --><"
384	+"/script>", {
385	cleanContent: 1,
386	executeScripts: 1
387	}
388	);
389
390	var d = new t.Deferred();
391	// IE need a async here
392	setTimeout(d.getTestCallback(function(){
393	t.assertEqual('number', typeof unTypedVarInDocScope);
394	t.assertEqual(2, unTypedVarInDocScope);
395	}), 40);
396
397	return d;
398	},
399	tearDown: function(){
400	node1.innerHTML = "";
401	}
402	},
403	{
404	name:'scriptsWithCData',
405	runTest: function(t){
406	html.set(node1, "<"
407	+"script><![CDATA[ unTypedVarInDocScope = 3; ]]><"
408	+"/script>", {
409	cleanContent: 1,
410	executeScripts: 1
411	}
412	);
413
414	var d = new t.Deferred();
415	// IE need a async here
416	setTimeout(d.getTestCallback(function(){
417	t.assertEqual('number', typeof unTypedVarInDocScope);
418	t.assertEqual(3, unTypedVarInDocScope);
419	}), 40);
420
421	return d;
422	},
423	tearDown: function(){
424	node1.innerHTML = "";
425	}
426	},
427
428	{
429	name: 'asyncRequire',
430	runTest: function(t){
431	console.log("scriptTests: " + this.name);
432	html.set(node1,
433	"<"
434	+"script>require(['dojo/tests/resources/AMDWidget']);<"
435	+"/script><div data-dojo-type='dojo/tests/resources/AMDWidget' data-dojo-id='AMDWidgetId'>Hi</div>",
436	{
437	executeScripts: true,
438	parseContent: true
439	}
440	);
441
442	// This ready() callback should fire after the require() above completes, and the
443	// parser instantiates the AMDWidget
444	var d = new t.Deferred();
445	ready(d.getTestCallback(function(){
446	t.t(AMDWidgetId, "AMDWidget was loaded and created");
447	}));
448
449	return d;
450	}
451	}
452	]);
453
454	doh.register('regexRegressionAndSpeedtest', [
455	{
456	name: 'cssPathAdjustments',
457	runTest: function(t){
458	// we do this test as one big string to emulate as good as possible,
459	// but split it later to easily see where we failed
460	var cssText = ".easy{ background-image:url(images/image.png) }\n"
461	+".dontReplaceEasy{ background-image:url(images/images/image.png) }\n"
462	+".hardurl{background-image:url(\t \"../../source/~test/%20t'e(s)t.gif(\"1')?foo=bar11103&bar=baz-foo\" \t);}body{};\n"
463	+".file{background-image: url(file:///home/nobody/image.png);}\n"
464	+".http{background-image: url(http://dojotoolkit.org/image.png);}\n"
465	+".https{background-image: url(https://dojotoolkit.org/image.png);}\n"
466	+".nonRelative{background-image:url(/toplevelfolder/image.gif);}\n"
467	+'@import "css/main.css";' + "\n@import \t'css/Newbee Url.css'\t;\n"
468	+"@import 'http://dojotoolkit.org/dojo.css';\n"
469	+" @import 'you/never/thought/' print;\n"
470	+' @import url("it/would/work") tv, screen;'+"\n"
471	+' @import url(/did/you/now.css);'+"\n"
472	+' @import "yes.i.did";';
473
474	var expectedCss = ".easy{ background-image:url(deep/nested/images/image.png) }\n"
475	+".dontReplaceEasy{ background-image:url(deep/nested/images/images/image.png) }\n"
476	+".hardurl{background-image:url(source/~test/%20t'e(s)t.gif(\"1')?foo=bar11103&bar=baz-foo);}body{};\n"
477	+".file{background-image: url(file:///home/nobody/image.png);}\n"
478	+".http{background-image: url(http://dojotoolkit.org/image.png);}\n"
479	+".https{background-image: url(https://dojotoolkit.org/image.png);}\n"
480	+".nonRelative{background-image:url(/toplevelfolder/image.gif);}\n"
481	+"@import \"deep/nested/css/main.css\";\n@import \"deep/nested/css/Newbee Url.css\"\t;\n"
482	+"@import 'http://dojotoolkit.org/dojo.css';\n"
483	+" @import \"deep/nested/you/never/thought/\" print;\n"
484	+' @import url(deep/nested/it/would/work) tv, screen;'+"\n"
485	+' @import url(/did/you/now.css);'+"\n"
486	+' @import "deep/nested/yes.i.did";';
487
488	for(var i = 0; i < 6; i++){
489	cssText += cssText;
490	expectedCss += expectedCss;
491	}
492
493	expectedCss = expectedCss.split("\n");
494
495	var setParams = {
496	referencePath: "deep/nested/file",
497	adjustPaths:1,
498	renderStyles:1
499	};
500
501	var adjustedCss;
502
503	// hijack internals to snatch the styles before they are inserted to DOM (DOM messes formating)
504	var oldFunc = html._ContentSetter.prototype._renderStyles;
505	html._ContentSetter.prototype._renderStyles = function(styles){
506	adjustedCss = styles.join();
507	};
508
509	var start = new Date();
510	html.set(node1, '<style>'+cssText+'</style>', setParams);
511	var end = new Date();
512
513	html._ContentSetter.prototype._renderStyles = oldFunc;
514
515	adjustedCss = adjustedCss.split("\n");
516	console.info('Time used to regex scan css and adjust relative paths within css:'+
517	(end - start)+' ms on '+ cssText.split('\n').length
518	+' css rows, with '+ cssText.length+' characters (roughly '
519	+Math.round(cssText.length/1024)+ 'Kb) of infile css');
520
521	// we split and loop to get a faster hint of where it failed
522	for(var i = 0; i < expectedCss.length; i++){
523	t.assertEqual(expectedCss[i], adjustedCss[i]);
524	}
525	},
526	tearDown: function(){
527	}
528	}
529	,
530	{
531	name:'htmlPathsSpeedTest',
532	runTest: function(t){
533	var htmlText = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">\n"
534	+"<title>should be removed</title>\n"
535	+"<img src=\"images/image.gif\"/>Testing\n"
536	+"<a href=\"../../topmost.html\">\n"
537	+" <img src=\"/siteroot/top.html\">\n"
538	+" <p style='background:url(\"images/back.png\")'>\n"
539	+" testing link\n"
540	+"</p></a>\n"
541	+"<style \ntype='text/css'>\n"
542	+" @import 'http://dojotoolkit.org/visible.css' tv, screen;\n"
543	+" @import \"./audio.css\" audio;\n"
544	+" @import url(/topsite/css/main.css);\n"
545	+" div.mywidget, #someId {\n"
546	+" background-color:url(../../css/main.css);"
547	+" display:none;\n"
548	+" background:url(../tmp/css)\n"
549	+" }\n"
550	+"</style>\n"
551	+"<link rel=\"stylesheet\" href=\"../../css/theme.css\" media=\"all\">\n"
552	+"<link media='print' type='text/css' rel='stylesheet' href='../../css/theme2.css'>\n"
553	+"<a style='display:block; background:url(/topmost/css)' href='../above'>above</a>\n"
554	+"<sc"+"ript type=\"text/javascript\"\n src=\"..\\windows\\morons\"></scr"+"ipt>\n"
555	+"<scr"+"ipt type=\"dojo/method\" src=\"/dont/mess/with/this\"></scr"+"ipt>\n"
556	+"<scr"+"ipt src=\"/dont/mess/here/either\" type=\"dojo/method\"></scr"+"ipt>\n"
557	+"<scr"+"ipt event=\"/havent/you/listened\" type=\"dojo/method\"></scr"+"ipt>\n"
558	+"<scr"+"ipt>JS CODE</scr"+"ipt>\n"
559	+"<a href='javascript:void(0)'>void</a>";
560
561
562	var expectedHtml = "\n\n<img src=\"deep/nested/images/image.gif\"/>Testing\n"
563	+"<a href=\"topmost.html\">\n"
564	+" <img src=\"/siteroot/top.html\">\n"
565	+" <p style='background:url(deep/nested/images/back.png)'>\n"
566	+" testing link\n"
567	+"</p></a>\n"
568	+"\n"
569	+"\n\n"
570	+"<a style='display:block; background:url(/topmost/css)' href='deep/above'>above</a>\n\n"
571	+"<scr"+"ipt type=\"dojo/method\" src=\"/dont/mess/with/this\"></scr"+"ipt>\n"
572	+"<scr"+"ipt src=\"/dont/mess/here/either\" type=\"dojo/method\"></scr"+"ipt>\n"
573	+"<scr"+"ipt event=\"/havent/you/listened\" type=\"dojo/method\"></scr"+"ipt>\n\n"
574	+"<a href='javascript:void(0)'>void</a>";
575
576
577	var expectedCss = [
578	"\n @import 'http://dojotoolkit.org/visible.css' tv, screen;\n"
579	+" @import \"deep/nested/audio.css\" audio;\n"
580	+" @import url(/topsite/css/main.css);\n"
581	+" div.mywidget, #someId {\n"
582	+" background-color:url(css/main.css);"
583	+" display:none;\n"
584	+" background:url(deep/tmp/css)\n"
585	+" }\n", "@import \"css/theme.css\";", "@import \"css/theme2.css\";"];
586
587	for(var i = 0; i < 6; i++){
588	htmlText += htmlText;
589	expectedHtml += expectedHtml;
590	expectedCss = expectedCss.concat(expectedCss);
591	}
592
593
594	var setParams = {
595	referencePath: "deep/nested/file",
596	executeScripts: 1,
597	adjustPaths: 1,
598	renderStyles: 1,
599	cleanContent: 1
600	};
601
602	var adjustedCss, adjustedHtml;
603
604	// hijack internals to snatch the styles before they are inserted to DOM (DOM messes formating)
605	var oldFunc = html._ContentSetter.prototype._renderStyles;
606	html._ContentSetter.prototype._renderStyles = function(styles){
607	adjustedCss = styles;
608	this.executeScripts = 0;
609	};
610
611	var oldSetFunc = html._ContentSetter.prototype.setContent;
612	html._ContentSetter.prototype.setContent = function(html){
613	console.log("replaced setContent is called");
614	adjustedHtml = this.content;
615	};
616
617	// TODO: presumably this hack code doesn't work anymore after the AMD conversion of html._ContentSetter
618	var oldXhr = dojo.xhrGet;
619	dojo.xhrGet = function(){}; // kill script download
620
621	var start = new Date();
622
623	html.set(node1, htmlText, setParams);
624
625	console.log("/calling set to clean and adjust paths");
626	var end = new Date();
627
628	// reset back to the way it was
629	html._ContentSetter.prototype._renderStyles = oldFunc;
630	html._ContentSetter.prototype.setContent = oldSetFunc;
631	dojo.xhrGet = oldXhr;
632
633	console.info('Time used to regex scan html/css and\n adjust relative paths (adjustPaths=true),\n copy scripts (executeScripts=true) and copy css innerText (renderStyles=true) and adjust paths in there \nTime:'+
634	(end - start)+' ms on '+ htmlText.split('\n').length
635	+' html rows, with '+ htmlText.length+' characters (roughly '
636	+Math.round(htmlText.length/1024)+ 'Kb)');
637
638	// we split and loop to get a faster hint of where it failed
639	adjustedHtml = adjustedHtml.split("\n");
640	expectedHtml = expectedHtml.split("\n");
641
642	for(var i = 0; i < expectedHtml.length; i++){
643	//console.debug(expectedHtml[i], i);
644	//console.debug(adjustedHtml[i], i);
645	t.assertEqual(expectedHtml[i], adjustedHtml[i]);
646	}
647
648	var exCssBlock, adjCssBlock;
649	for(var i = 0; i < expectedCss.length; i++){
650	t.assertEqual('string', typeof adjustedCss[i]);
651
652	exCssBlock = expectedCss[i].split('\n');
653	adjCssBlock = adjustedCss[i].split('\n');
654
655	for(var j = 0; j < exCssBlock.length;j++){
656	t.assertEqual(lang.trim(exCssBlock[j]), lang.trim(adjCssBlock[j]));
657	}
658
659	}
660	},
661	tearDown: function(){
662	}
663	},
664	{
665	name:'IE_AlphaImageLoader_PathAdjustments',
666	runTest: function(t){
667	if(!has("ie")){
668	console.info('aborting test IE_AlphaImageLoader_PathAdjustments, you dont use IE');
669	return;
670	}
671	var setParams = {
672	adjustPaths: 1,
673	renderStyles: 1,
674	referencePath: "deep/"
675	};
676
677	var sourceHtml = "<div style='width:10px;height:10px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=\"scale\", src=\"images/alpha(1).png\", nextProperty=\"useless\");'><!-- \n"
678	+" alpha png in IE 6 --></div>\n"
679	+"<style>\n"
680	+" .ie_menu_png {"
681	+" filter: \t progid:\n"
682	+" DXImageTransform.Microsoft.AlphaImageLoader(\n"
683	+" src='../midlevel/alpha(2).png')\n"
684	+" }\n"
685	+" #my_transparent_png {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/images/alpha(3).png') }\n"
686	+" #my_transparent_png1 {filter: progid:DXImageTransform.Microsoft.AlhaImageLoader(src='http://no.se/images/alpha(4).png')}\n"
687	+"</style>\n";
688
689
690	var expectedHtml = "<div style='width:10px;height:10px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=\"scale\", src=\"deep/images/alpha(1).png\", nextProperty=\"useless\");'><!-- \n"
691	+" alpha png in IE 6 --></div>\n\n";
692
693	var expectedCss = "\n"
694	+" .ie_menu_png {"
695	+" filter: \t progid:\n"
696	+" DXImageTransform.Microsoft.AlphaImageLoader(\n"
697	+" src='midlevel/alpha(2).png')\n"
698	+" }\n"
699	+" #my_transparent_png {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/images/alpha(3).png') }\n"
700	+" #my_transparent_png1 {filter: progid:DXImageTransform.Microsoft.AlhaImageLoader(src='http://no.se/images/alpha(4).png')}\n";
701
702
703	for(var i = 0; i < 7; i++){
704	sourceHtml += sourceHtml;
705	expectedHtml += expectedHtml;
706	expectedCss += expectedCss;
707	}
708
709	var adjustedHtml, adjustedCss;
710
711	// hijack internals to snatch the content
712	var oldRenderStyles = html._ContentSetter.prototype._renderStyles;
713	var oldSetContent = html._ContentSetter.prototype.setContent;
714	html._ContentSetter.prototype._renderStyles = function(styles){ adjustedCss = styles.join(''); };
715	html._ContentSetter.prototype.setContent = function(cont){ adjustedHtml = this.content; };
716
717	var start = new Date();
718	html.set(node1, sourceHtml, setParams);
719	var end = new Date();
720
721	console.info('Time used to replace AlphaImageLoader(src="...") '
722	+(end - start) + "ms in HTML with "+html.length
723	+' characters (roughly '+(Math.round(html.length/1024))+'Kb)');
724
725	// reset hijacked
726	html._ContentSetter.prototype._renderStyles = oldRenderStyles;
727	html._ContentSetter.prototype.setContent = oldSetContent;
728
729
730	// split on newline and run a check on each row to help debugging
731	expectedHtml = expectedHtml.split("\n");
732	adjustedHtml = adjustedHtml.split("\n");
733	for(var i = 0; i < expectedHtml.length; i++){
734	t.assertEqual(expectedHtml[i], adjustedHtml[i]);
735	}
736
737	expectedCss = expectedCss.split("\n");
738	adjustedCss = adjustedCss.split("\n");
739	for(var i = 0; i < expectedCss.length; i++){
740	t.assertEqual(expectedCss[i], adjustedCss[i]);
741	}
742
743	}
744	}
745	]);
746
747	doh.register("A_AlphaImageLoader_inAction", [{
748	name:"AlphaLoaderShowHow",
749	runTest:function(t){
750	// IE filter alphaimageloader paths must be relative to the page
751	// not to the cssFile that declares it
752
753	// demo a much better way of "Fixing" alpha png in IE6 than inlining in html
754	var imgHtml = "<img src='images/dojoLogo.png' class='run_png_fix'/>";
755
756	var showHowHtml = "<pre >\nCode used in IE transparent png example\n"
757	+"code (declared in main page, not through ContentPane)\n"
758	+"<script type='text/javascript'>\n"
759	+fixPngIE6.toString().replace(/\n\t?/g, "\n")
760	+"\n</script>\n"
761	+"<style type='text/css'>\n"
762	+" .run_png_fix {\n"
763	+" background-image:url(images/blank.gif);\n"
764	+" behaviour: expression(fixPngIE6.call(this));\n"
765	+" }\n"
766	+"</style>\n\n...\n\nHtml feeded to ContentPane (or your main page):\n"
767	+"<img src='images/dojoLogo.png' class='run_png_fix'/>\n</pre>";
768
769	html.set(
770	node1,
771	imgHtml + showHowHtml, {
772	executeScripts: 1,
773	renderStyles: 1
774	}
775	);
776	}
777	}]);
778
779	doh.register("setterReuse", [
780	{
781	// FIXME: finish this test!
782	name: 'renderStyles',
783	setUp: function() {
784	setter2 = new html._ContentSetter({
785	renderStyles: true,
786	cleanContent: true,
787	node: dom.byId("node2")
788	});
789	setter2.set('<style>#node2 { font-size: 18px }</style>New value');
790	},
791	runTest: function(t){
792	// test the fixture setup ok
793	var node2 = dom.byId("node2");
794	t.assertEqual("New value", node2.innerHTML);
795	t.assertEqual("18px", domStyle.get(node2, "fontSize"));
796
797	// grab the styleNodes in case we need to remove them later - there should be exactly 1
798	// in the reuse scenario, this is what we have to do today
799	var node2_styleNodes = setter2._styleNodes;
800	setter2._styleNodes = [];
801	t.assertEqual(1, node2_styleNodes.length);
802
803	// now reuse the setter on a different node
804	var node3 = setter2.node = dom.byId("node3");
805	setter2.set('<style>#node3 { font-size: 24px }</style>Another New value');
806
807	// test the old node is still good,
808	// and the new node got the correct value, style
809	t.assertEqual("New value", node2.innerHTML);
810	t.assertEqual("18px", domStyle.get(node2, "fontSize"));
811
812	t.assertEqual("Another New value", node3.innerHTML);
813	t.assertEqual("24px", domStyle.get(node3, "fontSize"));
814
815	// test the old styleNode is still around
816	t.assertEqual(1, node2_styleNodes.length);
817	// test we have just one in the new collection
818	t.assertEqual(1, setter2._styleNodes.length);
819
820	// I guess you might want to do this...
821	// remove content and associated styles from the current and previous node
822	setter2.set("");
823	t.assertEqual(0, setter2._styleNodes.length);
824	t.assertFalse("24px" == domStyle.get(node3, "fontSize"));
825
826	setter2.node = node2;
827	setter2._styleNodes = node2_styleNodes;
828	setter2.set("");
829	t.assertEqual(0, setter2._styleNodes.length);
830	t.assertFalse("18px" == domStyle.get(node2, "fontSize"));
831	}
832	}
833	]);
834
835	var remoteScriptsSetter;
836	var previousContent;
837	doh.register("remoteScripts", [
838	{
839	name: 'testCommentedScriptTag',
840	setUp: function() {
841	remoteScriptsSetter = new html._ContentSetter({
842	renderStyles: true,
843	cleanContent: true,
844	executeScripts: true,
845	node: dom.byId("node4")
846	});
847	previousContent = dom.byId("node4").innerHTML;
848	},
849	tearDown: function(){
850	dom.byId("node4").innerHTML = previousContent;
851	},
852	timeout: 10000,
853	runTest: function(t){
854	var deferred = new doh.Deferred();
855	var xhrDef = xhr.get({
856	url: "remote/commentedScript.html",
857	preventCache: true,
858	handleAs: "text"
859	});
860	xhrDef.then(
861	function(text){
862	remoteScriptsSetter.set(text);
863	var intv = setInterval(function(){
864	if(window.__remotePaneLoaded){
865	clearInterval(intv);
866	window.__remotePaneLoaded = null;
867	try{
868	//Test that entity characters in a src url for a script
869	//are properly converted to correct form
870	var node = document.getElementById("should_not_be_here");
871	doh.assertTrue(node == null);
872	deferred.callback(true);
873	}catch(e){
874	deferred.errback(new Error(e));
875	}
876	}
877	}, 500);
878	},
879	function(e){
880	deferred.errback(e);
881	}
882	);
883
884	return deferred;
885	}
886	},
887	{
888	name: 'testCommentedStyleTags',
889	setUp: function() {
890	remoteScriptsSetter = new html._ContentSetter({
891	renderStyles: true,
892	cleanContent: true,
893	executeScripts: true,
894	node: dom.byId("node4")
895	});
896	previousContent = dom.byId("node4").innerHTML;
897	},
898	tearDown: function(){
899	dom.byId("node4").innerHTML = previousContent;
900	},
901	timeout: 10000,
902	runTest: function(t){
903	var deferred = new doh.Deferred();
904	var xhrDef = xhr.get({
905	url: "remote/commentedStyles.html",
906	preventCache: true,
907	handleAs: "text"
908	});
909	xhrDef.then(
910	function(text){
911	remoteScriptsSetter.set(text);
912	var intv = setInterval(function(){
913	if(window.__remotePaneLoaded){
914	clearInterval(intv);
915	window.__remotePaneLoaded = null;
916	try{
917	var n1 = dojo.byId("n1");
918	var n2 = dojo.byId("n2");
919	var n3 = dojo.byId("n3");
920
921	doh.assertTrue(domStyle.get(n1, "display") === "none", "No commented out inline styles");
922	doh.assertTrue(domStyle.get(n2, "display") === "none", "No commented out inline links");
923	doh.assertTrue(domStyle.get(n3, "display") === "none", "No commented out inline imports");
924
925	//Test that entity characters in a src url for a script
926	//are properly converted to correct form
927	var node = document.getElementById("should_not_be_here");
928	doh.assertTrue(node == null);
929	deferred.callback(true);
930	}catch(e){
931	deferred.errback(new Error(e));
932	}
933	}
934	}, 500);
935	},
936	function(e){
937	deferred.errback(e);
938	}
939	);
940
941	return deferred;
942	}
943	},
944	{
945	name: 'testEntityChars',
946	setUp: function() {
947	remoteScriptsSetter = new html._ContentSetter({
948	renderStyles: true,
949	cleanContent: true,
950	executeScripts: true,
951	node: dom.byId("node4")
952	});
953	previousContent = dom.byId("node4").innerHTML;
954	},
955	tearDown: function(){
956	dom.byId("node4").innerHTML = previousContent;
957	},
958	timeout: 10000,
959	runTest: function(t){
960	var deferred = new doh.Deferred();
961	var xhrDef = xhr.get({
962	url: "remote/commentedScript.html",
963	preventCache: true,
964	handleAs: "text"
965	});
966	xhrDef.then(
967	function(text){
968	remoteScriptsSetter.set(text);
969	var intv = setInterval(function(){
970	if(window.__remotePaneLoaded2){
971	clearInterval(intv);
972	window.__remotePaneLoaded2 = null;
973	try{
974	//Test that entity characters in a src url for a script
975	//are properly converted to correct form
976	var node = document.getElementById("should_not_be_here2");
977	doh.assertTrue(node == null);
978	deferred.callback(true);
979	}catch(e){
980	deferred.errback(new Error(e));
981	}
982	}
983	}, 500);
984	},
985	function(e){
986	deferred.errback(e);
987	}
988	);
989	return deferred;
990	}
991	}
992	]);
993
994	doh.run();
995	});
996	</script>
997	<style>
998	@import "../../../dojo/resources/dojo.css";
999	@import "../../../dijit/themes/tundra/tundra.css";
1000	@import "../../../dijit/tests/css/dijitTests.css";
1001
1002	.box {
1003	border: 1px solid black;
1004	height: 190px;
1005	width: 80%;
1006	overflow: auto;
1007	}
1008
1009	.red {
1010	color: red;
1011	}
1012
1013	.dojoxTestWidget {
1014	border: 1px dashed red;
1015	background-color: #C0E209 ;
1016	}
1017
1018
1019	</style>
1020	</head>
1021	<body class='tundra'>
1022	<h1>dojox/html</h1>
1023	<h3>As dojox/html is derived from dojo/html, make sure that the dojo/html test passes before running this test</h3>
1024	<h3 class='red'>Test relies on a php page as backend, so you need php installed on your server</h3>
1025
1026	<div class='box' id='node1'>
1027	Initial value
1028	</div>
1029
1030	<div class='box' id='node2'>
1031	Initial value
1032	</div>
1033
1034	<div class='box' id='node3'>
1035	Initial value
1036	</div>
1037
1038	<div class='box' id='node4'>
1039	Initial value
1040	</div>
1041
1042	<table id='tableTest' class='box'>
1043	<thead>
1044	<tr>
1045	<td></td>
1046	</tr>
1047	</thead>
1048	<tbody>
1049	<tr>
1050	<td></td>
1051	</tr>
1052	<tbody>
1053	</table>
1054	</body>
1055	</html>

Note: See TracBrowser for help on using the repository browser.

Context Navigation

source: Dev/trunk/src/client/dojox/html/tests/test_set.html

Download in other formats: