Context Navigation

html.html

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

Line
1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2	"http://www.w3.org/TR/html4/strict.dtd">
3	<!--
4	we use a strict-mode DTD to ensure that the box model is the same for these
5	basic tests
6	-->
7	<html>
8	<head>
9	<title>testing Core HTML/DOM/CSS/Style utils</title>
10	<style type="text/css">
11	@import "../../resources/dojo.css";
12	</style>
13	<script type="text/javascript" src="../../dojo.js" data-dojo-config="isDebug:true"></script>
14	<script type="text/javascript">
15	require(["dojo", "doh", "dojo/sniff", "dojo/domReady!"], function(dojo, doh, has){
16
17	function getIframeDocument(/DOMNode/iframeNode){
18	//summary: Returns the document object associated with the iframe DOM Node argument.
19	var doc = iframeNode.contentDocument \|\| // W3
20	(
21	(iframeNode.contentWindow)&&(iframeNode.contentWindow.document)
22	) \|\| // IE
23	(
24	(iframeNode.name)&&(document.frames[iframeNode.name])&&
25	(documendoh.frames[iframeNode.name].document)
26	) \|\| null;
27	return doc;
28	}
29
30	// IE gets confused by the iframe when you press Refresh so load them dynamically
31	var iframe_div = dojo.byId('iframe_div');
32	dojo.addOnWindowUnload(function(){
33	iframe_div.innerHTML = 'unloading';
34	});
35	setTimeout(function(){
36	iframe_div.innerHTML = '<iframe src="absStrictIframe.html" name="iframe_strict" id="iframe_strict" \
37	style="border:3px solid black; padding:4px; margin:5px; background-color:black;" \
38	scrolling=yes allowtransparency=true></iframe>\
39	<iframe src="absQuirksIframe.html" name="iframe_quirks" id="iframe_quirks" \
40	style="border:3px solid black; padding:4px; margin:5px; background-color:black;" \
41	scrolling=yes allowtransparency=true></iframe>'; //'balanced
42	}, 0);
43
44	doh.register("t",
45	[
46	"doh.is(null, dojo.byId('nonExistantId'));",
47	"doh.is(null, dojo.byId(null));",
48	"doh.is(null, dojo.byId(''));",
49	"doh.is(undefined, dojo.byId(undefined));",
50
51	"doh.is(100, dojo.marginBox('sq100').w);",
52	"doh.is(100, dojo.marginBox('sq100').h);",
53	"doh.is(100, dojo._getMarginSize('sq100').w);",
54	"doh.is(100, dojo._getMarginSize('sq100').h);",
55
56	"doh.is(120, dojo.marginBox('sq100margin10').w);",
57	"doh.is(120, dojo.marginBox('sq100margin10').h);",
58	"doh.is(100, dojo.contentBox('sq100margin10').w);",
59	"doh.is(100, dojo.contentBox('sq100margin10').h);",
60
61	"doh.is(140, dojo.marginBox('sq100margin10pad10').w);",
62	"doh.is(140, dojo.marginBox('sq100margin10pad10').h);",
63	"doh.is(140, dojo._getMarginSize('sq100margin10pad10').w);",
64	"doh.is(140, dojo._getMarginSize('sq100margin10pad10').h);",
65
66	"doh.is(120, dojo.marginBox('sq100pad10').w);",
67	"doh.is(120, dojo.marginBox('sq100pad10').h);",
68
69	"doh.is(110, dojo.marginBox('sq100ltpad10').w);",
70	"doh.is(110, dojo.marginBox('sq100ltpad10').h);",
71	"doh.is(100, dojo.contentBox('sq100ltpad10').w);",
72	"doh.is(100, dojo.contentBox('sq100ltpad10').h);",
73
74	"doh.is(120, dojo.marginBox('sq100ltpad10rbmargin10').w);",
75	"doh.is(120, dojo.marginBox('sq100ltpad10rbmargin10').h);",
76
77	"doh.is(120, dojo.marginBox('sq100border10').w);",
78	"doh.is(120, dojo.marginBox('sq100border10').h);",
79	"doh.is(100, dojo.contentBox('sq100border10').w);",
80	"doh.is(100, dojo.contentBox('sq100border10').h);",
81
82	"doh.is(140, dojo.marginBox('sq100border10margin10').w);",
83	"doh.is(140, dojo.marginBox('sq100border10margin10').h);",
84	"doh.is(100, dojo.contentBox('sq100border10margin10').w);",
85	"doh.is(100, dojo.contentBox('sq100border10margin10').h);",
86
87	"doh.is(160, dojo.marginBox('sq100border10margin10pad10').w);",
88	"doh.is(160, dojo.marginBox('sq100border10margin10pad10').h);",
89	"doh.is(100, dojo.contentBox('sq100border10margin10pad10').w);",
90	"doh.is(100, dojo.contentBox('sq100border10margin10pad10').h);",
91
92	// FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge
93	// "doh.is(100, dojo.marginBox('sq100nopos').w);",
94	"doh.is(100, dojo.marginBox('sq100nopos').h);",
95
96	"doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).l);",
97	"doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).t);",
98	"doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).w);",
99	"doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).h);",
100
101	"doh.is(0, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).l);",
102	"doh.is(0, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).t);",
103	"doh.is(10, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).w);",
104	"doh.is(10, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).h);",
105
106	"doh.is(10, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).l);",
107	"doh.is(10, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).t);",
108	"doh.is(20, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).w);",
109	"doh.is(20, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).h);",
110
111	"doh.is(20, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).l);",
112	"doh.is(20, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).t);",
113	"doh.is(40, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).w);",
114	"doh.is(40, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).h);",
115
116	function scrollUp(){
117	scrollTo(0, 0);
118	},
119
120	function coordsBasic(t){
121	var pos = dojo.position("sq100", false);
122	// console.debug(pos);
123	doh.is(100, pos.x);
124	doh.is(100, pos.y);
125	doh.is(100, pos.w);
126	doh.is(100, pos.h);
127	},
128	function coordsMargin(t){
129	// position() is getting us the border-box location
130	var pos = dojo.position("sq100margin10", false);
131	doh.is(260, pos.x);
132	doh.is(110, pos.y);
133	doh.is(100, pos.w);
134	doh.is(100, pos.h);
135	pos = dojo.marginBox("sq100margin10");
136	doh.is(120, pos.w);
137	doh.is(120, pos.h);
138	// Though coords shouldn't be used, test it for backward compatibility.
139	// coords returns the border-box location and margin-box size
140	pos = dojo.coords("sq100margin10", false);
141	doh.is(260, pos.x);
142	doh.is(110, pos.y);
143	doh.is(120, pos.w);
144	doh.is(120, pos.h);
145	},
146	function coordsBorder(t){
147	var pos = dojo.position("sq100border10", false);
148	doh.is(100, pos.x);
149	doh.is(400, pos.y);
150	},
151	function sq100nopos(t){
152	var pos = dojo.position("sq100nopos", false);
153	// console.debug(pos);
154	doh.is(0, pos.x);
155	doh.t(pos.y > 0);
156	// FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge
157	// doh.is(100, pos.w);
158	doh.is(100, pos.h);
159	},
160	function coordsScrolled(t) {
161	var s = document.createElement('div');
162	var c = document.createElement('div');
163	document.body.appendChild(s);
164	s.appendChild(c);
165	var x=257, y= 285;
166	with (s.style) {
167	position = 'absolute';
168	overflow = 'scroll';
169	border = "10px solid black";
170	}
171	dojo.marginBox(s, {l: x, t: y, w: 100, h: 100});
172	dojo.marginBox(c, {l: 0, t: 0, w: 500, h: 500});
173	s.scrollTop = 200;
174	var pos = dojo.position(s, true);
175	doh.is(x, pos.x);
176	doh.is(y, pos.y);
177	},
178	{
179	name: "coordsIframe",
180	timeout: 2000,
181	runTest: function(){
182	var def = new doh.Deferred();
183	setTimeout(function(){ try{
184	var oldLtr = dojo._isBodyLtr();
185	var oldQuirks = has("quirks");
186	dojo.withGlobal(dojo.byId('iframe_quirks').win, function(){
187	doh.t(has("quirks"), "has('quirks') == true in quirks/iframe");
188	doh.f(dojo._isBodyLtr(), "isBodyLtr == false in RTL/iframe");
189	var pos = dojo.position('iframe_00_quirks');
190	doh.t(pos.x===0, "quirks iframe element x == 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")");
191	doh.t(pos.y===0, "quirks iframe element y == 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")");
192	doh.t(pos.w>0, "quirks iframe element w > 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")");
193	doh.t(pos.h>0, "quirks iframe element h > 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")");
194	});
195	dojo.withGlobal(dojo.byId('iframe_strict').win, function(){
196	doh.f(has("quirks"), "has('quirks') == false in strict/ifraee");
197	doh.f(dojo._isBodyLtr(), "isBodyLtr == false in RTL/iframe");
198	var pos = dojo.position('iframe_00_strict');
199	doh.t(pos.x===0, "strict iframe element x == 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")");
200	doh.t(pos.y===0, "strict iframe element y == 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")");
201	doh.t(pos.w>0, "strict iframe element w > 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")");
202	doh.t(pos.h>0, "strict iframe element h > 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")");
203	});
204	doh.t(!oldLtr == !dojo._isBodyLtr(), "isBodyLtr restored after withGlobal");
205	doh.is(oldQuirks, has("quirks"), "has('quirks') restored after withGlobal");
206	def.callback(true);
207	}catch(e){ def.errback(e); } }, 1000);
208	return def;
209	}
210	},
211	"doh.is(1, dojo.style('sq100nopos', 'opacity'));",
212
213	// never compare floating numbers directly!
214	"doh.is((0.1).toFixed(4), Number(dojo.style('sq100nopos', 'opacity', 0.1)).toFixed(4));",
215	"doh.is((0.8).toFixed(4), Number(dojo.style('sq100nopos', 'opacity', 0.8)).toFixed(4));",
216	function styleObject(){
217	dojo.style('sq100nopos', { 'opacity': 0.1 });
218	doh.is((0.1).toFixed(4), Number(dojo.style('sq100nopos', 'opacity')).toFixed(4));
219	dojo.style('sq100nopos', { 'opacity': 0.8 });
220	doh.is((0.8).toFixed(4), Number(dojo.style('sq100nopos', 'opacity')).toFixed(4));
221	},
222
223	"doh.is('static', dojo.style('sq100nopos', 'position'));",
224	function getBgcolor(t){
225	var bgc = dojo.style('sq100nopos', 'backgroundColor');
226	doh.t((bgc == "rgb(0, 0, 0)")\|\|(bgc == "black")\|\|(bgc == "#000000"));
227	},
228	function isDescendant(t){
229	doh.t(dojo.isDescendant("sq100", dojo.body()));
230	doh.t(dojo.isDescendant("sq100", dojo.doc));
231	doh.t(dojo.isDescendant("sq100", "sq100"));
232	doh.t(dojo.isDescendant(dojo.byId("sq100"), "sq100"));
233	doh.f(dojo.isDescendant("sq100", dojo.byId("sq100").firstChild));
234	doh.t(dojo.isDescendant(dojo.byId("sq100").firstChild, "sq100"));
235	},
236	function isDescendantIframe(t){
237	var bif = dojo.byId("blah");
238	// this test barely makes sense. disabling it for now.
239	// doh.t(dojo.isDescendant(bif.contentDocument.getElementById("subDiv"), bif.parentNode));
240	var subDiv = getIframeDocument(bif).getElementById("subDiv");
241	doh.t(dojo.isDescendant(subDiv, subDiv));
242	doh.t(dojo.isDescendant(subDiv, subDiv.parentNode));
243	doh.f(dojo.isDescendant(subDiv.parentNode, subDiv));
244
245	},
246	function testClassFunctions(t){
247	var node = dojo.byId("sq100");
248	dojo.removeClass(node);
249	dojo.addClass(node, "a");
250	doh.is("a", node.className, "class is a");
251	dojo.removeClass(node, "c");
252	doh.is("a", node.className, "class is still a");
253	t.assertTrue(dojo.hasClass(node, "a"), "class is a, test for a");
254	t.assertFalse(dojo.hasClass(node, "b"), "class is a, test for b");
255	dojo.addClass(node, "b");
256	doh.is("a b", node.className, "class is a b");
257	t.assertTrue(dojo.hasClass(node, "a"), "class is a b, test for a");
258	t.assertTrue(dojo.hasClass(node, "b"), "class is a b, test for b");
259	dojo.removeClass(node, "a");
260	doh.is("b", node.className, "class is b");
261	t.assertFalse(dojo.hasClass(node, "a"), "class is b, test for a");
262	t.assertTrue(dojo.hasClass(node, "b"), "class is b, test for b");
263	dojo.toggleClass(node, "a");
264	doh.is("b a", node.className, "class is b a");
265	t.assertTrue(dojo.hasClass(node, "a"), "class is b a, test for a");
266	t.assertTrue(dojo.hasClass(node, "b"), "class is b a, test for b");
267	dojo.toggleClass(node, "a");
268	doh.is("b", node.className, "class is b (again)");
269	t.assertFalse(dojo.hasClass(node, "a"), "class is b (again), test for a");
270	t.assertTrue(dojo.hasClass(node, "b"), "class is b (again), test for b");
271	dojo.toggleClass(node, "b");
272	doh.is("", node.className, "class is blank");
273	t.assertFalse(dojo.hasClass(node, "a"), "class is blank, test for a");
274	t.assertFalse(dojo.hasClass(node, "b"), "class is blank, test for b");
275	dojo.removeClass(node, "c");
276	t.assertTrue(!node.className, "no class");
277	var acuWorked = true;
278	try{
279	dojo.addClass(node);
280	}catch(e){
281	acuWorked = false;
282	}
283	doh.is(true, acuWorked, "addClass handles undefined class");
284	dojo.addClass(node, "a");
285	dojo.replaceClass(node, "b", "a");
286	t.assertTrue(dojo.hasClass(node, "b"), "class is b after replacing a, test for b");
287	t.assertFalse(dojo.hasClass(node, "a"), "class is b after replacing a, test for not a");
288
289	dojo.replaceClass(node, "", "b");
290	t.assertFalse(dojo.hasClass(node, "b"), "class b should be removed, with no class added");
291	t.is("", node.className, "The className is empty");
292
293	dojo.addClass(node, "b a");
294	dojo.replaceClass(node, "c", "");
295	t.is("b a c", node.className,
296	"The className is is 'b a c' after using an empty string in replaceClass");
297
298	t.f(dojo.hasClass(document, "ab"), "hasClass on document should not throw error");
299	},
300	function testAddRemoveClassMultiple(t){
301	var node = dojo.byId("sq100");
302	dojo.removeClass(node);
303	dojo.addClass(node, "a");
304	t.is("a", node.className, "class is a");
305	dojo.addClass(node, "a b");
306	t.is("a b", node.className, "class is a b");
307	dojo.addClass(node, "b a");
308	t.is("a b", node.className, "class is still a b");
309	dojo.addClass(node, ["a", "c"]);
310	t.is("a b c", node.className, "class is a b c");
311	dojo.removeClass(node, "c a");
312	t.is("b", node.className, "class is b");
313	dojo.removeClass(node);
314	t.is("", node.className, "empty class");
315	dojo.addClass(node, " c b a ");
316	t.is("c b a", node.className, "class is c b a");
317	dojo.removeClass(node, " c b ");
318	t.is("a", node.className, "class is a");
319	dojo.removeClass(node, ["a", "c"]);
320	t.is("", node.className, "empty class");
321	dojo.addClass(node, "a b");
322	dojo.replaceClass(node, "c", "a b");
323	t.is("c", node.className, "class is c");
324	dojo.replaceClass(node, "");
325	t.is("", node.className, "empty class");
326	node.className = "";
327	},
328	function getTypeInput(t){
329	doh.f(dojo.hasAttr(dojo.byId("input-no-type"), "type"));
330	doh.is(null, dojo.attr(dojo.byId("input-no-type"), "type"));
331	doh.t(dojo.hasAttr(dojo.byId("input-with-type"), "type"));
332	doh.is("checkbox", dojo.attr(dojo.byId("input-with-type"), "type"));
333	},
334	function getWithString(t){
335	doh.f(dojo.hasAttr("input-no-type", "type"));
336	doh.is(null, dojo.attr("input-no-type", "type"));
337	doh.t(dojo.hasAttr("input-with-type", "type"));
338	doh.is("checkbox", dojo.attr("input-with-type", "type"));
339	},
340	function attrId(t){
341	doh.t(dojo.hasAttr("div-no-tabindex", "id"));
342	doh.is("div-no-tabindex", dojo.attr("div-no-tabindex", "id"));
343	var div = document.createElement("div");
344	doh.f(dojo.hasAttr(div, "id"));
345	doh.is(null, dojo.attr(div, "id"));
346	dojo.attr(div, "id", "attrId1");
347	doh.t(dojo.hasAttr(div, "id"));
348	doh.is("attrId1", dojo.attr(div, "id"));
349	dojo.removeAttr(div, "id");
350	doh.f(dojo.hasAttr(div, "id"));
351	doh.is(null, dojo.attr(div, "id"));
352	},
353	function getTabindexDiv(t){
354	doh.f(dojo.hasAttr("div-no-tabindex", "tabIndex"));
355	doh.t(dojo.attr("div-no-tabindex", "tabIndex") <= 0);
356	doh.t(dojo.hasAttr("div-tabindex-minus-1", "tabIndex"));
357	if(!has("opera")){
358	// Opera (at least <= 9) does not support tabIndex="-1"
359	doh.is(-1, dojo.attr("div-tabindex-minus-1", "tabIndex"));
360	}
361	doh.t(dojo.hasAttr("div-tabindex-0", "tabIndex"));
362	doh.is(0, dojo.attr("div-tabindex-0", "tabIndex"));
363	doh.is(1, dojo.attr("div-tabindex-1", "tabIndex"));
364	},
365	function getTabindexInput(t){
366	if(!has("ie") \|\| has("ie") >= 8){
367	// IE6/7 always reports tabIndex as defined
368	doh.f(dojo.hasAttr("input-no-tabindex", "tabIndex"));
369	doh.f(dojo.attr("input-no-tabindex", "tabIndex"));
370	}
371	doh.t(dojo.hasAttr("input-tabindex-minus-1", "tabIndex"));
372	if(!has("opera")){
373	// Opera (at least <= 9) does not support tabIndex="-1"
374	doh.is(-1, dojo.attr("input-tabindex-minus-1", "tabIndex"));
375	}
376	doh.t(dojo.hasAttr("input-tabindex-0", "tabIndex"));
377	doh.is(0, dojo.attr("input-tabindex-0", "tabIndex"));
378	doh.is(1, dojo.attr("input-tabindex-1", "tabIndex"));
379	},
380	function setTabindexDiv(t){
381	var div = document.createElement("div");
382	doh.is(null, dojo.attr(div, "tabIndex"));
383	dojo.attr(div, "tabIndex", -1);
384	if(!has("opera")){
385	// Opera (at least <= 9) does not support tabIndex="-1"
386	doh.is(-1, dojo.attr(div, "tabIndex"));
387	}
388	dojo.attr(div, "tabIndex", 0);
389	doh.is(0, dojo.attr(div, "tabIndex"));
390	dojo.attr(div, "tabIndex", 1);
391	doh.is(1, dojo.attr(div, "tabIndex"));
392	},
393	function setTabindexInput(t){
394	var input = document.createElement("input");
395	doh.t(dojo.attr(input, "tabIndex") <= 0);
396	dojo.attr(input, "tabIndex", -1);
397	if(!has("opera")){
398	// Opera (at least <= 9) does not support tabIndex="-1"
399	doh.is(-1, dojo.attr(input, "tabIndex"));
400	}
401	dojo.attr(input, "tabIndex", 0);
402	doh.is(0, dojo.attr(input, "tabIndex"));
403	dojo.attr(input, "tabIndex", 1);
404	doh.is(1, dojo.attr(input, "tabIndex"));
405	},
406	function removeTabindexFromDiv(t){
407	var div = document.createElement("div");
408	dojo.attr(div, "tabIndex", 1);
409	doh.is(1, dojo.attr(div, "tabIndex"));
410	dojo.removeAttr(div, "tabIndex");
411	doh.is(null, dojo.attr(div, "tabIndex"));
412	},
413	function removeDisabledFromInput(t){
414	var input = document.createElement("input");
415	dojo.attr(input, "disabled", true);
416	doh.t(dojo.attr(input, "disabled"));
417	dojo.removeAttr(input, "disabled");
418	doh.f(dojo.attr(input, "disabled"));
419	},
420	function removeTabindexFromInput(t){
421	var input = document.createElement("input");
422	dojo.attr(input, "tabIndex", 1);
423	doh.is(1, dojo.attr(input, "tabIndex"));
424	dojo.removeAttr(input, "tabIndex");
425	doh.is(null, dojo.attr(input, "tabIndex"));
426	},
427	function setReadonlyInput(t){
428	var input = document.createElement("input");
429	doh.f(dojo.attr(input, "readonly"));
430	dojo.attr(input, "readonly", true);
431	doh.is(true, dojo.attr(input, "readonly"));
432	dojo.attr(input, "readonly", false);
433	doh.is(false, dojo.attr(input, "readonly"));
434	},
435	function attr_map(t){
436	var input = document.createElement("input"),
437	input2 = document.createElement("input");
438	var ctr= 0;
439	dojo.attr(input, {
440	"class": "thinger blah",
441	"tabIndex": 1,
442	"type": "text",
443	"onfocus": function(e){
444	ctr++;
445	}
446	});
447	dojo.body().appendChild(input);
448	dojo.body().appendChild(input2);
449	doh.is(1, dojo.attr(input, "tabIndex"), "tabIndex");
450	if(!has("ie") \|\| has("ie") > 7){
451	// IE6/7 treats type="text" as missing, even if it was
452	// explicitly specified
453	doh.is("text", dojo.attr(input, "type"), "type");
454	}
455	doh.is(0, ctr, "onfocus ctr == 0");
456	doh.t(dojo.hasClass(input, "thinger"), "hasClass of thinger");
457	doh.t(dojo.hasClass(input, "blah"), "hasClass of blah");
458	var def = new doh.Deferred();
459	input.focus();
460	setTimeout(def.getTestErrback(function(){
461	doh.is(1, ctr, "onfocus ctr == 1");
462	input2.focus();
463	setTimeout(def.getTestErrback(function(){
464	input.focus();
465	setTimeout(def.getTestCallback(function(){
466	doh.is(2, ctr, "onfocus ctr == 2");
467	}), 10);
468	}), 10);
469	}), 10);
470	return def;
471	},
472	function attr_reconnect(t){
473	var input = document.createElement("input"),
474	input2 = document.createElement("input");
475	var ctr = 0;
476	dojo.attr(input, "type", "text");
477	dojo.attr(input, "onfocus", function(e){ ctr++; });
478	dojo.attr(input, "onfocus", function(e){ ctr++; });
479	dojo.attr(input, "onfocus", function(e){ ctr++; });
480	dojo.body().appendChild(input);
481	dojo.body().appendChild(input2);
482	if(!has("ie") \|\| has("ie") > 7){
483	// IE6/7 treats type="text" as missing, even if it was
484	// explicitly specified
485	doh.is("text", dojo.attr(input, "type"));
486	}
487	doh.is(0, ctr);
488	var def = new doh.Deferred();
489	input.focus();
490	setTimeout(def.getTestErrback(function(){
491	doh.is(1, ctr, "onfocus ctr == 1");
492	input2.focus();
493	setTimeout(def.getTestErrback(function(){
494	input.focus();
495	setTimeout(def.getTestCallback(function(){
496	doh.is(2, ctr, "onfocus ctr == 2");
497	}), 10);
498	}), 10);
499	}), 10);
500	return def;
501	},
502	function attrSpecials(){
503	var node = document.createElement("div");
504	dojo.body().appendChild(node);
505	dojo.attr(node, {
506	style: {
507	opacity: 0.5,
508	width: "30px",
509	border: "1px solid black"
510	}
511	});
512	doh.is(0.5, dojo.style(node, "opacity"));
513	doh.is(30, dojo.style(node, "width"));
514	doh.is(1, dojo.style(node, "borderWidth"));
515	dojo.attr(node, {
516	innerHTML: "howdy!"
517	});
518	doh.is("howdy!", node.innerHTML);
519	doh.is("howdy!", dojo.attr(node, "innerHTML"));
520	dojo.attr(node, "innerHTML", "<span>howdy!</span>");
521	doh.is(1, node.firstChild.nodeType);
522	doh.is("span", node.firstChild.nodeName.toLowerCase());
523	doh.is("<span>howdy!</span>", node.innerHTML.toLowerCase());
524	doh.is("<span>howdy!</span>", dojo.attr(node, "innerHTML").toLowerCase());
525	},
526	function testLabelForAttr(t){
527	// create label with no for attribute make sure requesting
528	// it as for and html for returns null
529	var label = document.createElement("label");
530	if(!has("ie")){
531	// IE always assumes that "for" is present
532	doh.f(dojo.attr(label, "for"));
533	doh.f(dojo.attr(label, "htmlFor"));
534	}
535	// add a for attribute and test that can get by requesting for
536	dojo.attr(label, "for", "testId");
537	doh.is("testId", dojo.attr(label, "for"));
538	// add as htmlFor and make sure it is returned when requested as htmlFor
539	var label2 = document.createElement("label");
540	dojo.attr(label2, "htmlFor", "testId2");
541	doh.is("testId2", dojo.attr(label2, "htmlFor"));
542	// check than when requested as for or htmlFor attribute is found
543	doh.t(dojo.hasAttr(label, "for"));
544	doh.t(dojo.hasAttr(label2, "htmlfor"));
545	// test from markup
546	var labelNoFor = dojo.byId("label-no-for");
547	// make sure testing if has attribute using for or htmlFor
548	// both return null when no value set
549	if(!has("ie")){
550	// IE always assumes that "for" is present
551	doh.f(dojo.hasAttr(labelNoFor, "for"));
552	doh.f(dojo.hasAttr(labelNoFor, "htmlFor"));
553	}
554	var labelWithFor = dojo.byId("label-with-for");
555	// when markup includes for make certain testing if has attribute
556	// using for or htmlFor returns true
557	doh.t(dojo.hasAttr(labelWithFor, "for"));
558	doh.t(dojo.hasAttr(labelWithFor, "htmlFor"));
559	// when markup include for attrib make sure can retrieve using for or htmlFor
560	doh.is("input-with-label", dojo.attr(labelWithFor, "for"));
561	doh.is("input-with-label", dojo.attr(labelWithFor, "htmlFor"));
562	},
563	function attrInnerHtmlDiv(t){
564	var n = dojo.create("div", {
565	innerHTML: "1<em>2</em>3"
566	}, dojo.body());
567	doh.is("1<em>2</em>3", n.innerHTML.toLowerCase());
568	dojo.destroy(n);
569	},
570	function attrInnerHtmlTable(t){
571	var n = dojo.create("table", {
572	innerHTML: "<thead><tr><th>1st!</th></tr></thead><tbody></tbody>"
573	}, dojo.body());
574	doh.is("<thead><tr><th>1st!</th></tr></thead><tbody></tbody>",
575	n.innerHTML.toLowerCase().replace(/\s+/g, ""));
576	dojo.destroy(n);
577	},
578	function attrInputTextValue(t){
579	doh.is("123", dojo.byId("input-text-value").value);
580	doh.is("123", dojo.attr("input-text-value", "value"));
581	dojo.attr("input-text-value", "value", "abc");
582	doh.is("abc", dojo.byId("input-text-value").value);
583	doh.is("abc", dojo.attr("input-text-value", "value"));
584	dojo.byId("input-text-value").value = "xyz";
585	doh.is("xyz", dojo.byId("input-text-value").value);
586	doh.is("xyz", dojo.attr("input-text-value", "value"));
587	dojo.byId("input-text-value").value = "123"; // fixes initialization problem when the test is reloaded
588	},
589	function testInputDisabled(t){
590	doh.f(dojo.attr("input-no-disabled", "disabled"));
591	doh.t(dojo.attr("input-with-disabled", "disabled"));
592	doh.t(dojo.attr("input-with-disabled-true", "disabled"));
593	},
594	function testIframeDestroy10095(t){
595	var iframeWin = dojo.byId('10095_iframe').win;
596	doh.t(!iframeWin.document.getElementById('10095_textbox'), "reloaded iframe element destroyed");
597	},
598	function testGCSsvg(t){
599	var s = dojo.getComputedStyle(dojo.byId("rect1"));
600	doh.t(typeof s != "undefined", "dojo.getComputedStyle succeeded on an svg shape");
601	}
602	]
603	);
604	// test to make sure position() works with a variety of scrollbars
605	dojo.forEach(["None", "Vert", "Both"], function(scroll){
606	dojo.forEach(["Quirks", "Strict"], function(doctype){
607	var id = "scrolling" + doctype + "Iframe" + scroll;
608	doh.register(id, {
609	name: "test_" + id,
610	timeout: 4000,
611	runTest: function(t){
612	var d = new doh.Deferred(),
613	s = document.createElement('SPAN');
614	s.loaded = function(iframe){
615	// resultReady is called from inside the iframe
616	iframe.resultReady = d.getTestCallback(function(){
617	t.is('EQUAL', iframe.testResult);
618	});
619	iframe.runScrollingTest(iframe);
620	};
621	s.innerHTML = '<iframe class="iframeTest" id="' + id + '" src="scrolling' + doctype + 'Iframe.html?ltr&' + scroll + '&large" frameborder="0" onload="this.parentNode.loaded(this)" style="background-color:gray;" allowtransparency></iframe>';
622	dojo.byId("iframeContainer").appendChild(s);
623	return d;
624	}
625	});
626	});
627	});
628
629	doh.register("t",
630	[
631	function emptySvg(t){
632	dojo.empty(dojo.byId("surface"));
633	doh.f(!!dojo.byId("surface").firstChild, "svg firstChild");
634	},
635	function destroySvg(t){
636	dojo.destroy(dojo.byId("surface"));
637	doh.f(!!dojo.byId("surface"), "svg byId");
638	},
639	function emptyObject(t){
640	dojo.empty(dojo.byId("objectToEmpty"));
641	doh.f(!!dojo.byId("objectToEmpty").firstChild, "object firstChild");
642	},
643	function destroyObject(t){
644	dojo.destroy(dojo.byId("objectToEmpty"));
645	doh.f(!!dojo.byId("objectToEmpty"), "object byId");
646	},
647	function destroyIframe(t){
648	dojo.destroy(dojo.byId("iframeToDestroy"));
649	doh.f(!!dojo.byId("iframeToDestroy"), "iframe byId");
650	},
651	function destroyDivNotInDOM(t){
652	var p = dojo.byId("divToRemoveFromDOM");
653	var n = dojo.byId("divToDestroy");
654	p = p.parentNode.removeChild(p);
655	doh.f(!!dojo.byId("divToRemoveFromDOM"), "div byId");
656	doh.t(!!p.firstChild, "div child 1");
657	doh.is(p.firstChild, n, "div 1st child");
658	doh.isNot(p.firstChild, p.lastChild, "div 1st child");
659	dojo.destroy(n);
660	doh.t(!!p.firstChild, "div child 2");
661	doh.isNot(p.firstChild, n, "div 2nd child");
662	doh.is(p.firstChild, p.lastChild, "div 2nd child");
663	dojo.empty(p);
664	doh.f(!!p.firstChild, "div child 3");
665	dojo.destroy(p);
666	doh.t(true, "no exception thrown");
667	}
668	]
669	);
670
671	doh.runOnLoad();
672	});
673	</script>
674	<style type="text/css">
675	html, body {
676	padding: 0px;
677	margin: 0px;
678	border: 0px;
679	}
680
681	#sq100 {
682	background-color: black;
683	color: white;
684	position: absolute;
685	left: 100px;
686	top: 100px;
687	width: 100px;
688	height: 100px;
689	border: 0px;
690	padding: 0px;
691	margin: 0px;
692	overflow: hidden;
693	}
694
695	#sq100margin10 {
696	background-color: black;
697	color: white;
698	position: absolute;
699	left: 250px;
700	top: 100px;
701	width: 100px;
702	height: 100px;
703	border: 0px;
704	padding: 0px;
705	margin: 10px;
706	overflow: hidden;
707	}
708
709	#sq100margin10pad10 {
710	background-color: black;
711	color: white;
712	position: absolute;
713	left: 400px;
714	top: 100px;
715	width: 100px;
716	height: 100px;
717	border: 0px;
718	padding: 10px;
719	margin: 10px;
720	overflow: hidden;
721	}
722
723	#sq100pad10 {
724	background-color: black;
725	color: white;
726	position: absolute;
727	left: 100px;
728	top: 250px;
729	width: 100px;
730	height: 100px;
731	border: 0px;
732	padding: 10px;
733	margin: 0px;
734	overflow: hidden;
735	}
736
737	#sq100ltpad10 {
738	background-color: black;
739	color: white;
740	position: absolute;
741	left: 250px;
742	top: 250px;
743	width: 100px;
744	height: 100px;
745	border: 0px;
746	padding-left: 10px;
747	padding-top: 10px;
748	padding-right: 0px;
749	padding-bottom: 0px;
750	margin: 0px;
751	overflow: hidden;
752	}
753
754	#sq100ltpad10rbmargin10 {
755	background-color: black;
756	color: white;
757	position: absolute;
758	left: 400px;
759	top: 250px;
760	width: 100px;
761	height: 100px;
762	border: 0px;
763	padding-left: 10px;
764	padding-top: 10px;
765	padding-right: 0px;
766	padding-bottom: 0px;
767	margin-left: 0px;
768	margin-top: 0px;
769	margin-right: 10px;
770	margin-bottom: 10px;
771	overflow: hidden;
772	}
773
774	#sq100border10 {
775	background-color: black;
776	color: white;
777	position: absolute;
778	left: 100px;
779	top: 400px;
780	width: 100px;
781	height: 100px;
782	border: 10px solid yellow;
783	padding: 0px;
784	margin: 0px;
785	overflow: hidden;
786	}
787
788	#sq100border10margin10 {
789	background-color: black;
790	color: white;
791	position: absolute;
792	left: 250px;
793	top: 400px;
794	width: 100px;
795	height: 100px;
796	border: 10px solid yellow;
797	padding: 0px;
798	margin: 10px;
799	overflow: hidden;
800	}
801
802	#sq100border10margin10pad10 {
803	background-color: black;
804	color: white;
805	position: absolute;
806	left: 400px;
807	top: 400px;
808	width: 100px;
809	height: 100px;
810	border: 10px solid yellow;
811	padding: 10px;
812	margin: 10px;
813	overflow: hidden;
814	}
815
816	#sq100nopos {
817	background-color: black;
818	color: white;
819	width: 100px;
820	height: 100px;
821	padding: 0px;
822	margin: 0px;
823	}
824
825	#scrollingStrictIframe,
826	#scrollingQuirksIframe {
827	border: 10px solid black;
828	}
829	</style>
830	</head>
831	<body>
832	<h1>testing Core HTML/DOM/CSS/Style utils</h1>
833	<div id="sq100">
834	100px square, abs
835	</div>
836	<div id="sq100margin10">
837	100px square, abs, 10px margin
838	</div>
839	<div id="sq100margin10pad10">
840	100px square, abs, 10px margin, 10px padding
841	</div>
842	<div id="sq100pad10">
843	100px square, abs, 10px padding
844	</div>
845	<div id="sq100ltpad10">
846	100px square, abs, 10px left and top padding
847	</div>
848	<div id="sq100ltpad10rbmargin10">
849	100px square, abs, 10px left and top padding, 10px bottom and right margin
850	</div>
851	<div id="sq100border10">
852	100px square, abs, 10px yellow border
853	</div>
854	<div id="sq100border10margin10">
855	100px square, abs, 10px yellow border, 10px margin
856	</div>
857	<div id="sq100border10margin10pad10">
858	100px square, abs, 10px yellow border, 10px margin, 10px padding
859	</div>
860	<div id="sq100nopos">
861	100px square, no positioning
862	</div>
863
864	<iframe id="blah" name="blah" src="javascript:'<html&gt<body><div id=subDiv></div></body></html>'"></iframe>
865
866	<script type="text/javascript">
867	var reloaded = false;
868	function iframe10095loaded() {
869	require(["dojo", "dojo/domReady!"], function(dojo) {
870	var iframeWin = dojo.byId('10095_iframe').win;
871	dojo.withGlobal(iframeWin, function(){ dojo.destroy(dojo.byId('10095_textbox')) });
872	if(!reloaded){
873	reloaded = true;
874	dojo.byId('10095_iframe').src=iframeWin.frameElement.src;
875	}
876	});
877	}
878	</script>
879	<iframe id="10095_iframe" style="display:none;" src="javascript:'<html><head><script>frameElement.win=window</script></head><body><input id=10095_textbox></body></html>'" onload="iframe10095loaded()"></iframe>
880
881	<div id='iframe_div' style="position:absolute;top:0;left:500px;"></div>
882
883	<div id="div-no-tabindex"></div>
884	<div id="div-tabindex-minus-1" tabIndex="-1"></div>
885	<div id="div-tabindex-0" tabIndex="0"></div>
886	<div id="div-tabindex-1" tabIndex="1"></div>
887
888	<div>
889	<input id="input-no-type">
890	<input id="input-with-type" type="checkbox">
891	<input id="input-no-tabindex">
892	<input id="input-tabindex-minus-1" tabIndex="-1">
893	<input id="input-tabindex-0" tabIndex="0">
894	<input id="input-tabindex-1" tabIndex="1">
895	<input id="input-text-value" type="text" value="123">
896	<input id="input-no-disabled" type="text">
897	<input id="input-with-disabled" type="text" disabled>
898	<input id="input-with-disabled-true" disabled="disabled">
899	</div>
900	<div>
901	<label id="label-no-for">label with no for </label><input type="text" id="label-test-input">
902	<label id="label-with-for" for="input-with-label">label with for </label><input type="text" id="input-with-label">
903	</div>
904
905	<div id="iframeContainer"></div>
906
907	<!-- SVG element to test dojo.getComputedStyle on IE9 (#14103) -->
908	<!-- SVG element to test empty -->
909	<svg id="surface" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"
910	><rect id="rect1" fill="rgb(255, 0, 0)" x="0" y="0" width="80" height="60" ry="0" rx="0" fill-rule="evenodd"
911	/></svg>
912
913	<!-- OBJECT element to test empty -->
914	<object width="500" height="500" id="objectToEmpty" data="data:application/x-silverlight," type="application/x-silverlight"
915	><param name="background" value="transparent"
916	/></object>
917
918	<!-- IFRAME element to test destroy -->
919	<iframe id="iframeToDestroy" src="about:blank"
920	><span></span
921	></iframe>
922
923	<!-- DIV element to test destroy of element not in the DOM -->
924	<div id="divToRemoveFromDOM"
925	><div id="divToDestroy"></div
926	><div></div
927	></div>
928	</body>
929	</html>

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

Context Navigation

source: Dev/trunk/src/client/dojo/tests/_base/html.html

Download in other formats: