Context Navigation

← Previous Revision
Latest Revision
Next Revision →
Blame
Revision Log

ContentPaneLayout.html @ 483

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

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

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

Context Navigation

source: Dev/trunk/src/client/dijit/tests/layout/ContentPaneLayout.html @ 483

Download in other formats: