Context Navigation

source: Dev/branches/rest-dojo-ui/client/dijit/tests/layout/ContentPaneLayout.html @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago
Reworked project structure based on REST interaction and Dojo library. As soon as this is stable, the old jQueryUI branch can be removed (it's kept for reference).
File size: 29.5 KB

Line
1	<!DOCTYPE html>
2	<html>
3	<head>
4	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
5	<title>ContentPane layout-related DOH test</title>
6	<style type="text/css">
7	@import "../../themes/claro/document.css";
8	@import "../../themes/claro/claro.css";
9	@import "../css/dijitTests.css";
10
11	.resizableWidget {
12	border: 1px dashed red;
13	background-color: #C0E209;
14	}
15	</style>
16
17	<script type="text/javascript" src="../../../dojo/dojo.js"
18	data-dojo-config="isDebug: true"></script>
19
20	<script type="text/javascript">
21	dojo.require("doh.runner");
22	dojo.require("dojo.parser");
23
24	dojo.require("dijit._Widget");
25	dojo.require("dijit._TemplatedMixin");
26	dojo.require("dijit.layout.ContentPane");
27	dojo.require("dijit.layout.TabContainer");
28	dojo.require("dijit.layout.BorderContainer");
29	dojo.require("dijit.TitlePane");
30	dojo.require("dijit.form.Form");
31	dojo.require("dijit.Dialog");
32
33	// widgets used in doc loaded via href
34	dojo.require("dijit.form.ComboBox");
35	dojo.require("dijit.form.Button");
36
37	// Keep track of which panes have had a load event, and how
38	// many load events have occurred for those panes
39	var loadEvents = {
40	};
41	function myOnLoad(){
42	console.log("onload for " + this);
43	loadEvents[this.id] = (loadEvents[this.id] \|\| 0) + 1;
44	}
45
46	dojo.ready(function(){
47
48	// create a do nothing, only for test widget
49	dojo.declare("ResizableWidget",
50	[dijit._Widget, dijit._TemplatedMixin], {
51	templateString: "<span class='dijitInline resizableWidget'>resizable widget</span>",
52	_resized: 0,
53	_resizeArgs: null,
54
55	constructor: function(){
56	this.history = [];
57	},
58
59	startup: function(){
60	this.history.push("started");
61	},
62
63	resize: function(newSize){
64	this.history.push("resized");
65	this._resized++;
66	this._resizeArgs = arguments;
67	if(newSize){
68	dojo.marginBox(this.domNode, newSize);
69	}
70	}
71	});
72
73	// Keep track of the number of startup() calls to every widget.
74	// Since the href's widgets haven't been created yet we monitor startup() calls on the prototype
75	var startups = {};
76	dojo.connect(dijit._Widget.prototype, "startup", function(){
77	startups[this.id] = (startups[this.id] \|\| 0) + 1;
78	});
79
80	doh.register("parse", function(){
81	dojo.parser.parse();
82	});
83
84	// Test that ContentPanes calls startup() on child widgets appropriately
85	// TODO: overlap here (and other places) with ContentPane.html?
86	doh.register("startup events",
87	{
88	name: "startup on href pane's children",
89	timeout: 5000,
90	runTest: function(t){
91	var d = new doh.Deferred();
92	// Wait for load events to occur (after fetching URL's)
93	setTimeout(d.getTestCallback(function(){
94	var pane1 = dijit.byId("pane1"),
95	children = pane1.getChildren();
96	doh.is(2, children.length, "found combobox and button");
97	doh.is(1, startups[children[0].id], "combobox started once");
98	doh.is(1, startups[children[0].id], "button started once");
99
100	// startup of layout widgets is tested below, indirectly, by
101	// monitoring how man times resize is called etc.
102	}), 4000);
103	return d;
104	}
105	}
106	);
107
108	// Test that ContentPanes defer their load until they are shown
109	doh.register("load events",
110	[
111	{
112	name: "initial conditions",
113	timeout: 5000,
114	runTest: function(t){
115	var d = new doh.Deferred();
116	// Wait for load events to occur (after fetching URL's)
117	setTimeout(d.getTestCallback(function(){
118	doh.is(1, loadEvents.pane1, "pane1");
119	dojo.forEach(["pane2", "innerPane1", "innerPane2", "bcPane1", "bcPane2"], function(pane){
120	doh.f(loadEvents[pane], pane, pane + " shouldn't be loaded");
121	});
122	}), 4000);
123	return d;
124	}
125	},
126	{
127	name: "reset href in hidden pane, pane2",
128	timeout: 2000,
129	runTest: function(t){
130	// Resetting an href on a hidden pane should have no effect
131	var d = new doh.Deferred();
132
133	dijit.byId("pane2").set("href", "doc0.html");
134	setTimeout(d.getTestCallback(function(){
135	doh.f(loadEvents.pane2, "pane2 shouldn't be loaded");
136	}), 750);
137
138	return d;
139	}
140	},
141	{
142	name: "reset href in hidden pane, innerPane1",
143	timeout: 2000,
144	runTest: function(t){
145	// Resetting an href on a hidden pane should have no effect
146	var d = new doh.Deferred();
147
148	dijit.byId("innerPane1").set("href", "doc1.html");
149	setTimeout(d.getTestCallback(function(){
150	doh.f(loadEvents.innerPane1, "innerPane1 shouldn't be loaded");
151	}), 750);
152
153	return d;
154	}
155	},
156	{
157	name: "reset href in hidden pane, bcPane2",
158	timeout: 2000,
159	runTest: function(t){
160	// Resetting an href on a hidden pane should have no effect
161	var d = new doh.Deferred();
162
163	dijit.byId("bcPane2").set("href", "doc0.html");
164	setTimeout(d.getTestCallback(function(){
165	doh.f(loadEvents.bcPane2, "bcPane2 shouldn't be loaded");
166	}), 750);
167
168	return d;
169	}
170	},
171	{
172	name: "selecting ContentPane causes it to load",
173	timeout: 5000,
174	runTest: function(t){
175	var d = new doh.Deferred();
176
177	dijit.byId("outerTC").selectChild(dijit.byId("pane2"));
178	setTimeout(d.getTestCallback(function(){
179	doh.is(1, loadEvents.pane2, "pane2");
180	}), 4000);
181
182	return d;
183	}
184	},
185	{
186	name: "selecting a TabContainer causes it's selected child to load",
187	timeout: 5000,
188	runTest: function(t){
189	var d = new doh.Deferred();
190
191	doh.f(loadEvents.innerPane1, "innerPane1 not loaded yet");
192	dijit.byId("outerTC").selectChild(dijit.byId("innerTC"));
193	setTimeout(d.getTestCallback(function(){
194	doh.is(1, loadEvents.innerPane1, "innerPane1 now loaded");
195	}), 4000);
196
197	return d;
198	}
199	},
200	{
201	name: "selecting a BorderContainer causes it's children to load",
202	timeout: 5000,
203	runTest: function(t){
204	var d = new doh.Deferred();
205
206	//doh.f(loadEvents.bcPane1, "bcPane1 not loaded");
207	//doh.f(loadEvents.bcPane2, "bcPane2 not loaded");
208
209	dijit.byId("outerTC").selectChild(dijit.byId("bc"));
210
211	setTimeout(d.getTestCallback(function(){
212	doh.is(1, loadEvents.bcPane1, "bcPane1");
213	doh.is(1, loadEvents.bcPane2, "bcPane2");
214	}), 4000);
215
216	return d;
217	}
218	}
219	]
220	);
221
222	// Keep track of which layout widgets each resize call to each layout widget,
223	// specifically whether each call specified a size or not.
224	// Since the href's widgets haven't been created yet we can't connect to their resize()
225	// methods, but we can monitor resize() on the prototype
226	var layoutResizes = {};
227	dojo.connect(dijit.layout._LayoutWidget.prototype, "resize", function(){
228	// this is the pointer to the widget, and arguments are newsize/curSize args to resize()
229	var ary = layoutResizes[this.id];
230	if(!ary){
231	ary = layoutResizes[this.id] = [];
232	}
233	ary.push(arguments);
234	});
235
236	doh.register("resize events",
237	[
238	// Test that when ContentPane w/single resizable child is shown,
239	// the child is sized to match the ContentPane
240	{
241	name: "single child",
242	runTest: function(t){
243	var child = dijit.byId("singleChildResizable");
244	doh.is(0, child._resized, "hasn't been shown yet so no resize events");
245
246	dijit.byId("resizeTC").selectChild(dijit.byId("singleChildPane"));
247
248	doh.t(child._resized, "got resize event"); // note: should only be 1 but currently gets 2
249	doh.t(child._resizeArgs && child._resizeArgs.length, "got size specified");
250
251	var size = child._resizeArgs[0];
252	doh.t(size && size.h, "non-0 height specified");
253	doh.t(size && size.w, "non-0 width specified");
254	}
255	},
256	// Test that when ContentPane w/multiple resizable children is shown,
257	// the children aren't sized to match the ContentPane, but we do call
258	// resize on them so they can lay themselves out
259	{
260	name: "multiple children",
261	runTest: function(t){
262	var child1 = dijit.byId("multipleChildResizable1"),
263	child2 = dijit.byId("multipleChildResizable2");
264
265	doh.is(0, child1._resized, "child1 hasn't been shown yet so no resize events");
266	doh.is(0, child2._resized, "child2 hasn't been shown yet so no resize events");
267
268	dijit.byId("resizeTC").selectChild(dijit.byId("multipleChildPanes"));
269
270	doh.t(child1._resized, "got resize event for child1");
271	doh.is(0, child1._resizeArgs && child1._resizeArgs.length, "no size specified for child1");
272	doh.t(child2._resized, "got resize event for child2");
273	doh.is(0, child2._resizeArgs && child2._resizeArgs.length, "no size specified for child2")
274	}
275	},
276
277	// Test that resize event works correctly for href w/single layout widget
278	{
279	name: "single resizable href",
280	timeout: 5000,
281	runTest: function(t){
282	var d = new doh.Deferred();
283
284	dijit.byId("resizeTC").selectChild(dijit.byId("singleChildHref"));
285
286	// Wait for load events to occur (after fetching URL's)
287	setTimeout(d.getTestCallback(function(){
288	// Check top level border container got sized to fit ContentPane
289	var child = dijit.byId("singleChildHrefBorderContainer");
290	doh.t(child, "href was loaded and top level BorderContainer was created");
291	doh.t(layoutResizes["singleChildHrefBorderContainer"], "got resize event");
292	doh.t(layoutResizes["singleChildHrefBorderContainer"][0].length, "got size specified");
293
294	var size = layoutResizes["singleChildHrefBorderContainer"][0][0];
295	doh.t(size && size.h, "non-0 height specified");
296	doh.t(size && size.w, "non-0 width specified");
297
298	// Check that resize() events also trickled down to inner TabContainer
299	var child2 = dijit.byId("singleChildHrefInnerTabContainer");
300	doh.t(child2, "inner TabContainer was created");
301	doh.t(layoutResizes["singleChildHrefInnerTabContainer"], "got resize event");
302	doh.is(0, layoutResizes["singleChildHrefInnerTabContainer"][0].length, "no size specified")
303	}), 4000);
304	return d;
305	}
306	},
307
308	// Test that resize event works correctly for href w/multiple layout widgets
309	{
310	name: "multiple resizable href",
311	timeout: 5000,
312	runTest: function(t){
313	var d = new doh.Deferred();
314
315	dijit.byId("resizeTC").selectChild(dijit.byId("multipleChildHref"));
316
317	// Wait for load events to occur (after fetching URL's)
318	setTimeout(d.getTestCallback(function(){
319	// Check that resize() done on TabContainer
320	var child = dijit.byId("multipleChildHrefTabContainer");
321	doh.t(child, "TabContainer was created");
322	doh.t(layoutResizes["multipleChildHrefTabContainer"], "got resize event");
323	doh.is(0, layoutResizes["multipleChildHrefTabContainer"][0].length, "no size specified")
324	}), 4000);
325	return d;
326	}
327	},
328
329	// Test that resize() is called on resizable children hidden inside of a form widget
330	// where the form widget is inside a layout container
331	{
332	name: "multiple resizable elements hidden in form in TabContainer",
333	runTest: function(t){
334	var child1 = dijit.byId("resizableInForm1"),
335	child2 = dijit.byId("resizableInForm2");
336
337	doh.is(0, child1._resized, "child1 hasn't been shown yet so no resize events");
338	doh.is(1, child1.history.length, "child1 # of history events (before show)");
339	doh.is("started", child1.history[0], "child1 history");
340
341	doh.is(0, child2._resized, "child2 hasn't been shown yet so no resize events");
342	doh.is(1, child1.history.length, "child2 # of history events (before show)");
343	doh.is("started", child2.history[0], "child2 history");
344
345	dijit.byId("resizeTC").selectChild(dijit.byId("multipleResizableInForm"));
346
347	doh.t(child1._resized, "got resize event for child1");
348	doh.is(0, child1._resizeArgs && child1._resizeArgs.length, "no size specified for child1");
349	doh.t(child2._resized, "got resize event for child2");
350	doh.is(0, child2._resizeArgs && child2._resizeArgs.length, "no size specified for child2")
351	}
352	},
353
354	{
355	name: "single resizable element hidden in form in TabContainer",
356	runTest: function(t){
357	var child = dijit.byId("resizableInForm0");
358
359	doh.is(0, child._resized, "child hasn't been shown yet so no resize events");
360	doh.is(1, child.history.length, "child # of history events (before show)");
361	doh.is("started", child.history[0], "child history");
362
363	dijit.byId("resizeTC").selectChild(dijit.byId("singleResizableInForm"));
364
365	doh.t(child._resized, "got resize event for child");
366	doh.is(1, child._resizeArgs && child._resizeArgs.length, "size specified")
367	}
368	},
369
370	// Test that form where parent isn't a layout container calls startup() and resize()
371	// on it's child layout widgets
372	{
373	name: "single resizable element in form with size",
374	runTest: function(t){
375	var child = dijit.byId("fssc");
376	doh.t(child._resized, "got resize event for child");
377	doh.is(1, child._resizeArgs && child._resizeArgs.length, "size specified")
378	}
379	},
380
381	{
382	name: "multiple resizable elements in form with size",
383	runTest: function(t){
384	var child1 = dijit.byId("fsmc1"),
385	child2 = dijit.byId("fsmc2");
386
387	doh.t(child1._resized, "got resize event for child1");
388	doh.is(0, child1._resizeArgs && child1._resizeArgs.length, "no size specified for child1");
389	doh.t(child2._resized, "got resize event for child2");
390	doh.is(0, child2._resizeArgs && child2._resizeArgs.length, "no size specified for child2")
391	}
392	},
393
394	{
395	name: "single resizable elements in form with no size, doLayout=false",
396	runTest: function(t){
397	var child = dijit.byId("fnsc");
398
399	doh.t(child._resized, "got resize event for child");
400	doh.is(0, child._resizeArgs && child._resizeArgs.length, "no size specified for child")
401	}
402	},
403
404	{
405	name: "multiple resizable elements in form with no size",
406	runTest: function(t){
407	var child1 = dijit.byId("fnmc1"),
408	child2 = dijit.byId("fnmc2");
409
410	doh.t(child1._resized, "got resize event for child1");
411	doh.is(0, child1._resizeArgs && child1._resizeArgs.length, "no size specified for child1");
412	doh.t(child2._resized, "got resize event for child2");
413	doh.is(0, child2._resizeArgs && child2._resizeArgs.length, "no size specified for child2")
414	}
415	}
416	]
417	);
418
419	// Make sure that TitlePane loads it's href at the appropriate time, and also that
420	// it calls resize on it's children at the appropriate time (since that's the contract
421	// for layout widgets, and ContentPane is acting as a layout widget).
422	doh.register("TitlePane",
423	[
424	/***
425	* test for #8197, uncomment when it's fixed.
426	{
427	name: "initially open, single child",
428	timeout: 2000,
429	runTest: function(t){
430	var d = new doh.Deferred();
431
432	var tp = dijit.byId("otpHsc");
433
434	// Allow time for href to load
435	setTimeout(d.getTestCallback(function(){
436	// Check that href loaded
437	doh.is(1, loadEvents["otpHsc"], "otpHsc loaded on page load");
438
439	// Check that resize() done on child
440	doh.t(layoutResizes["otpHscBorderContainer"], "got resize event");
441	doh.is(0, layoutResizes["otpHscBorderContainer"][0].length, "no size specified")
442	}), 750);
443
444	return d;
445	}
446	},
447	*/
448	{
449	name: "initially open, href multiple children",
450	timeout: 5000,
451	runTest: function(t){
452	var d = new doh.Deferred();
453
454	var tp = dijit.byId("otpHmc");
455
456	// Allow time for href to load
457	setTimeout(d.getTestCallback(function(){
458	// Check that href loaded
459	doh.is(1, loadEvents["otpHmc"], "otpHmc loaded on page load");
460
461	// Check that resize() done on children
462	doh.t(layoutResizes["otpHmcBorderContainer"], "got resize event for BC");
463	doh.t(layoutResizes["otpHmcTabContainer"], "got resize event for TC");
464	doh.is(0, layoutResizes["otpHmcBorderContainer"][0].length, "no size specified for BC")
465	}), 4000);
466
467	return d;
468	}
469	},
470
471	{
472	name: "initially open, multiple children",
473	runTest: function(t){
474	var tp = dijit.byId("otpMc");
475
476	// Check that resize() done on children
477	doh.t(dijit.byId("otpMc_child1")._resized, "got resize event for child1");
478	doh.t(dijit.byId("otpMc_child2")._resized, "got resize event for child2");
479	}
480	},
481
482	{
483	name: "initially closed, href multiple children",
484	timeout: 5000,
485	runTest: function(t){
486	var d = new doh.Deferred();
487
488	doh.f(loadEvents["ctpHmc"], "ctpHmc load deferred until open");
489
490	var tp = dijit.byId("ctpHmc");
491	tp.set("open", true);
492
493	// Allow time for href to load, pane to expand, and resize to be called on children
494	setTimeout(d.getTestCallback(function(){
495	// Check that href loaded
496	doh.is(1, loadEvents["ctpHmc"], "ctpHmc loaded when expanded");
497
498	// Check that resize() done on children
499	doh.t(layoutResizes["ctpHmcBorderContainer"], "got resize event for BC");
500	doh.t(layoutResizes["ctpHmcTabContainer"], "got resize event for TC");
501	doh.is(0, layoutResizes["ctpHmcBorderContainer"][0].length, "no size specified for BC")
502	}), 4000);
503
504	return d;
505	}
506	},
507
508	{
509	name: "initially closed, multiple children",
510	timeout: 2000,
511	runTest: function(t){
512	var d = new doh.Deferred();
513
514	doh.f(dijit.byId("ctpMc_child1")._resized, "resize event for child1 deferred");
515	doh.f(dijit.byId("ctpMc_child2")._resized, "resize event for child2 deferred");
516
517	var tp = dijit.byId("ctpMc");
518	tp.set("open", true);
519
520	// Allow time for pane to expand, and resize to be called on children
521	setTimeout(d.getTestCallback(function(){
522	// Check that resize() done on children
523	doh.t(dijit.byId("ctpMc_child1")._resized, "got resize event for child1");
524	doh.t(dijit.byId("ctpMc_child2")._resized, "got resize event for child2");
525	}), 750);
526
527	return d;
528	}
529	}
530	]
531	);
532
533	// Make sure that Dialog loads it's href when shown, and also that
534	// it calls resize on it's children when shown (since that's the contract
535	// for layout widgets, and ContentPane is acting as a layout widget).
536	doh.register("Dialog",
537	[
538	{
539	name: "href multiple children",
540	timeout: 5000,
541	runTest: function(t){
542	var d = new doh.Deferred();
543
544	doh.f(loadEvents["dlgHmc"], "dlgHmc load deferred until open");
545
546	var dlg = dijit.byId("dlgHmc");
547	dlg.show();
548
549	// Allow time for href to load, pane to expand, and resize to be called on children
550	setTimeout(d.getTestCallback(function(){
551	// Check that href loaded
552	doh.is(1, loadEvents["dlgHmc"], "dlgHmc loaded when expanded");
553
554	// Check that resize() done on children
555	doh.t(layoutResizes["dlgHmcBorderContainer"], "got resize event for BC");
556	doh.t(layoutResizes["dlgHmcTabContainer"], "got resize event for TC");
557	doh.is(0, layoutResizes["dlgHmcBorderContainer"][0].length, "no size specified for BC")
558	}), 4000);
559
560	return d;
561	},
562	tearDown: function(){
563	var dlg = dijit.byId("dlgHmc");
564	dlg.hide();
565	}
566	},
567
568	{
569	name: "multiple inlined children",
570	timeout: 2000,
571	runTest: function(t){
572	var d = new doh.Deferred();
573
574	doh.f(dijit.byId("dlgMc_child1")._resized, "resize event for child1 deferred");
575	doh.f(dijit.byId("dlgMc_child2")._resized, "resize event for child2 deferred");
576
577	var dlg = dijit.byId("dlgMc");
578	dlg.show();
579
580	// Allow time for pane to expand, and resize to be called on children
581	setTimeout(d.getTestCallback(function(){
582	// Check that resize() done on children
583	doh.t(dijit.byId("dlgMc_child1")._resized, "got resize event for child1");
584	doh.t(dijit.byId("dlgMc_child2")._resized, "got resize event for child2");
585	}), 750);
586
587	return d;
588	},
589	tearDown: function(){
590	var dlg = dijit.byId("dlgMc");
591	dlg.hide();
592	}
593	}
594	]
595	);
596
597	// Test that resizing a TabContainer doesn't reload href (when refreshOnShow=true), bug #8197
598	doh.register("TabContainer resize/reload tests",
599	[
600	{
601	name: "initial conditions",
602	timeout: 5000,
603	runTest: function(t){
604	var d = new doh.Deferred();
605	// Wait for load events to occur (after fetching URL's)
606	setTimeout(d.getTestCallback(function(){
607	doh.is(1, loadEvents.reloadTC_pane1, "pane1 loaded");
608	}), 4000);
609	return d;
610	}
611	},
612	{
613	name: "reload on reshow",
614	timeout: 5000,
615	runTest: function(t){
616	var d = new doh.Deferred();
617
618	dijit.byId("reloadTC").selectChild(dijit.byId("reloadTC_pane2"));
619	dijit.byId("reloadTC").selectChild(dijit.byId("reloadTC_pane1"));
620	setTimeout(d.getTestCallback(function(){
621	doh.is(2, loadEvents.reloadTC_pane1, "pane1 loaded again");
622	}), 4000);
623	return d;
624	}
625	},
626	{
627	name: "no reload on TabContainer resize",
628	timeout: 5000,
629	runTest: function(t){
630	var d = new doh.Deferred();
631
632	dijit.byId("reloadTC").resize({h: 300, w: 300});
633	setTimeout(d.getTestCallback(function(){
634	doh.is(2, loadEvents.reloadTC_pane1, "pane1 not loaded again");
635	}), 4000);
636	return d;
637	}
638	}
639	]
640	);
641
642	doh.run();
643	});
644
645	</script>
646	</head>
647	<body class="claro">
648	<h1>dijit.layout.ContentPane layout related DOH test</h1>
649
650	<p>
651	Tests ContentPane in it's role as a layout widget, including as child of another layout widgets (especially TabContainer).
652	</p>
653
654	<h2>Tests that href gets loaded when ContentPane is first made visible</h2>
655	<div id="outerTC" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 880px; height: 200px;"'>
656	<div id="pane1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='href:"doc0.html", title:"Initially Selected", onLoad:myOnLoad'>
657	initially selected pane
658	</div>
659	<div id="pane2" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='href:"doc1.html", title:"Initially Hidden", onLoad:myOnLoad'>
660	unselected pane
661	</div>
662	<div id="innerTC" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='nested:true, title:"Nested TabContainer"'>
663	<div id="innerPane1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='href:"doc0.html", title:"Initially Selected", onLoad:myOnLoad'>
664	initially selected inner pane
665	</div>
666	<div id="innerPane2" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='href:"doc1.html", title:"Initially Hidden", onLoad:myOnLoad'>
667	unselected pane
668	</div>
669	</div>
670	<div id="bc" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props='title:"BorderContainer"'>
671	<div id="bcPane1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='href:"doc0.html", region:"left", style:"width: 200px;", onLoad:myOnLoad'>
672	left pane
673	</div>
674	<div id="bcPane2" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='href:"doc1.html", region:"center", onLoad:myOnLoad'>
675	center pane
676
677	<!-- when this ContentPane is shown each of these widgets should get a resize()
678	call w/no size specification -->
679	<div id="bcResizable1" data-dojo-type="ResizableWidget" ></div>
680	<div id="bcResizable2" data-dojo-type="ResizableWidget" ></div>
681	</div>
682	</div>
683	</div>
684
685	<h2>Tests for resizing in a layout container hierarchy</h2>
686	<div id="resizeTC" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 880px; height: 200px;"'>
687	<div id="resizePane1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Initially Selected", onLoad:myOnLoad'>
688	initially selected pane
689	</div>
690	<div id="singleChildPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Single ResizableChild", onLoad:myOnLoad'>
691	<div id="singleChildResizable" data-dojo-type="ResizableWidget" ></div>
692	</div>
693	<div id="multipleChildPanes" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Multiple ResizableChild", onLoad:myOnLoad'>
694	<div id="multipleChildResizable1" data-dojo-type="ResizableWidget" ></div>
695	<div style="border: groove blue medium;">
696	<span>hide the second widget to see if ContentPane can still find it</span>
697	<div id="multipleChildResizable2" data-dojo-type="ResizableWidget" ></div>
698	<span>ending text</span>
699	</div>
700	</div>
701	<div id="multipleResizableInForm" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Multiple resizable in form", onLoad:myOnLoad'>
702	<div data-dojo-type="dijit.form.Form">
703	<div id="resizableInForm1" data-dojo-type="ResizableWidget" ></div>
704	<div id="resizableInForm2" data-dojo-type="ResizableWidget" ></div>
705	</div>
706	</div>
707	<div id="singleResizableInForm" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Single resizable in form", onLoad:myOnLoad'>
708	<div data-dojo-type="dijit.form.Form">
709	<div id="resizableInForm0" data-dojo-type="ResizableWidget" ></div>
710	</div>
711	</div>
712	<div id="singleChildHref" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Href Single Child",
713	href:"borderContainer.php?id=singleChildHref", onLoad:myOnLoad'></div>
714	<div id="multipleChildHref" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Href Multiple Children",
715	href:"multipleLayoutWidgets.php?id=multipleChildHref", onLoad:myOnLoad'></div>
716	</div>
717
718
719	<h2>Size on Form, single nested layout widgets</h2>
720	<form data-dojo-type="dijit.form.Form" style="height:100px; width: 100px; border: medium inset gray; padding: 10px;" id="fss">
721	<div data-dojo-type="ResizableWidget" id="fssc">
722	</div>
723	</form>
724
725	<h2>Size on Form, multiple nested layout widget</h2>
726	<form data-dojo-type="dijit.form.Form" style="height:250px; width: 150px; border: medium inset gray; padding: 10px;" id="fsm">
727	<div data-dojo-type="ResizableWidget" style="width: 100px; height: 100px; border: 1px solid black;" id="fsmc1">
728	child #1 (100x100)
729	</div>
730	<div data-dojo-type="ResizableWidget" style="width: 100px; height: 100px; border: 1px solid black;" id="fsmc2">
731	child #2 (100x100)
732	</div>
733	</form>
734
735	<h2>No size on Form, single nested layout widgets</h2>
736	<form data-dojo-type="dijit.form.Form" style="border: medium inset gray; padding: 10px;" data-dojo-props="doLayout: false" id="fns">
737	<div data-dojo-type="ResizableWidget" style="height:200px; width: 400px;" id="fnsc">
738	</div>
739	</form>
740
741	<h2>No size on Form, multiple nested layout widget</h2>
742	<form data-dojo-type="dijit.form.Form" style="border: medium inset gray; padding: 10px;" id="fnm">
743	<div data-dojo-type="ResizableWidget" style="width: 100px; height: 100px; border: 1px solid black;" id="fnmc1">
744	child #1 (100x100)
745	</div>
746	<div data-dojo-type="ResizableWidget" style="width: 100px; height: 100px; border: 1px solid black;" id="fnmc2">
747	child #2 (100x100)
748	</div>
749	</form>
750
751	<h2>Tests that ContentPane resize doesn't trigger reload</h2>
752	<div id="reloadTC" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 880px; height: 200px;"'>
753	<div id="reloadTC_pane1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='href:"doc0.html", title:"Initially Selected", onLoad:myOnLoad, refreshOnShow:true'>
754	initially selected pane
755	</div>
756	<div id="reloadTC_pane2" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='href:"doc1.html", title:"Initially Hidden", onLoad:myOnLoad'>
757	unselected pane
758	</div>
759	</div>
760
761	<h2>Test the ContentPane loads href and resizes children (as per it's contract a layout widget)
762	when it's not a child of a layout container itself</h2>
763	<div id="ctpHsc" data-dojo-type="dijit.TitlePane" data-dojo-props='title:"Closed TitlePane Href Single Child", open:false,
764	href:"borderContainer.php?id=ctpHsc&sized=true", onLoad:myOnLoad'></div>
765	<br><br>
766
767	<div id="ctpHmc" data-dojo-type="dijit.TitlePane" data-dojo-props='title:"Closed TitlePane Href Multiple Children", open:false,
768	href:"multipleLayoutWidgets.php?id=ctpHmc", onLoad:myOnLoad'></div>
769	<br><br>
770
771	<div id="otpHsc" data-dojo-type="dijit.TitlePane" data-dojo-props='title:"Opened TitlePane Href Single Child",
772	href:"borderContainer.php?id=otpHsc&sized=true", onLoad:myOnLoad'></div>
773	<br><br>
774
775	<div id="otpHmc" data-dojo-type="dijit.TitlePane" data-dojo-props='title:"Opened TitlePane Href Multiple Children",
776	href:"multipleLayoutWidgets.php?id=otpHmc", onLoad:myOnLoad'></div>
777	<br><br>
778
779	<div id="otpMc" data-dojo-type="dijit.TitlePane" data-dojo-props='title:"Opened TitlePane Multiple Children"'>
780	<!-- these widgets should get a resize on page load -->
781	<div id="otpMc_child1" data-dojo-type="ResizableWidget" ></div>
782	<div id="otpMc_child2" data-dojo-type="ResizableWidget" ></div>
783	</div>
784	<br><br>
785
786	<div id="ctpMc" data-dojo-type="dijit.TitlePane" data-dojo-props='title:"Closed TitlePane Multiple Children", open:false'>
787	<!-- these widgets should get a resize() when the TitlePane is opened -->
788	<div id="ctpMc_child1" data-dojo-type="ResizableWidget" ></div>
789	<div id="ctpMc_child2" data-dojo-type="ResizableWidget" ></div>
790	</div>
791	<br><br>
792
793	<div id="dlgHmc" data-dojo-type="dijit.Dialog" data-dojo-props='title:"Dialog Href Multiple Children",
794	href:"multipleLayoutWidgets.php?id=dlgHmc", onLoad:myOnLoad'></div>
795
796	<div id="dlgMc" data-dojo-type="dijit.Dialog" data-dojo-props='title:"Dialog Multiple Children"'>
797	<!-- these widgets should get a resize() when the Dialog is opened -->
798	<div id="dlgMc_child1" data-dojo-type="ResizableWidget" ></div>
799	<div id="dlgMc_child2" data-dojo-type="ResizableWidget" ></div>
800	</div>
801
802	</body>
803	</html>

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

Download in other formats: