Context Navigation

ContentPaneLayout.html

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

Rev	Line
[483]	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

Download in other formats: