dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
831 lines (710 loc) • 32.2 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>ContentPane layout-related DOH test</title>
<style type="text/css">
.resizableWidget {
border: 1px dashed red;
background-color: #C0E209;
}
</style>
<script type="text/javascript" src="../boilerplate.js"></script>
<script type="text/javascript">
require([
"doh/runner",
"dojo/_base/array",
"dojo/aspect",
"dojo/_base/declare",
"dojo/dom-geometry",
"dojo/store/Memory",
"dojo/parser",
"dijit/registry",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/Dialog",
"dijit/form/ComboBox",
"dijit/form/Form",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/layout/_LayoutWidget",
"dijit/layout/TabContainer",
"dijit/TitlePane",
"dojo/domReady!"
], function(doh, array, aspect, declare, domGeom, Memory, parser,
registry, _WidgetBase, _TemplatedMixin,
Dialog, Form, BorderContainer, ContentPane, _LayoutWidget, TabContainer, TitlePane){
// Keep track of which panes have had a load event, and how
// many load events have occurred for those panes
var loadEvents = {
};
myOnLoad = function(){
console.log("onload for " + this);
loadEvents[this.id] = (loadEvents[this.id] || 0) + 1;
};
// create a do nothing, only for test widget
declare("ResizableWidget", [_WidgetBase, _TemplatedMixin], {
templateString: "<span class='dijitInline resizableWidget'>resizable widget</span>",
_resized: 0,
_resizeArgs: null,
constructor: function(){
this.history = [];
},
startup: function(){
this.history.push("started");
},
resize: function(newSize){
this.history.push("resized");
this._resized++;
this._resizeArgs = arguments;
if(newSize){
domGeom.setMarginBox(this.domNode, newSize);
}
}
});
// Monitor lifecycle of widgets. This used to be done by attaching to _WidgetBase.prototype and
// _LayoutWidget.prototype, but that leads to race conditions since declare() runs first, and looks
// at the original methods, not the advised-methods.
var startups = {};
var layoutResizes = {};
aspect.after(registry, "add", function(widget){
// Keep track of the number of startup() calls to every widget.
// Since the href's widgets haven't been created yet we monitor startup() calls on the prototype
aspect.after(widget, "startup", function(){
startups[widget.id] = (startups[widget.id] || 0) + 1;
}, true);
// Keep track of which layout widgets each resize call to each layout widget,
// specifically whether each call specified a size or not.
// Since the href's widgets haven't been created yet we can't connect to their resize()
// methods, but we can monitor resize() on the prototype
aspect.after(widget, "resize", function(){
// this is the pointer to the widget, and arguments are newsize/curSize args to resize()
var ary = layoutResizes[widget.id];
if(!ary){
ary = layoutResizes[widget.id] = [];
}
ary.push(arguments);
}, true);
}, true);
doh.register("parse", function(){
return parser.parse();
});
// Test that ContentPanes calls startup() on child widgets appropriately
// TODO: overlap here (and other places) with ContentPane.html?
doh.register("startup events",
{
name: "startup on href pane's children",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
// Wait for load events to occur (after fetching URL's)
var pane1 = registry.byId("pane1");
pane1.onLoadDeferred.then(d.getTestCallback(function(){
var children = pane1.getChildren();
doh.is(2, children.length, "found combobox and button");
doh.is(1, startups[children[0].id], "combobox started once");
doh.is(1, startups[children[0].id], "button started once");
}));
// startup of layout widgets is tested below, indirectly, by
// monitoring how man times resize is called etc.
return d;
}
}
);
// Test that ContentPanes defer their load until they are shown
doh.register("load events", [
{
name: "initial conditions",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
// Wait for load events to occur (after fetching URL's)
registry.byId("pane1").onLoadDeferred.then(d.getTestCallback(function(){
array.forEach(["pane2", "innerPane1", "innerPane2", "bcPane1", "bcPane2"], function(pane){
doh.f(loadEvents[pane], pane, pane + " shouldn't be loaded");
});
}));
return d;
}
},
{
name: "reset href in hidden pane, pane2",
timeout: 2000,
runTest: function(){
// Resetting an href on a hidden pane should have no effect
var d = new doh.Deferred();
registry.byId("pane2").set("href", "doc0.html");
setTimeout(d.getTestCallback(function(){
doh.f(loadEvents.pane2, "pane2 shouldn't be loaded");
}), 750);
return d;
}
},
{
name: "reset href in hidden pane, innerPane1",
timeout: 2000,
runTest: function(){
// Resetting an href on a hidden pane should have no effect
var d = new doh.Deferred();
registry.byId("innerPane1").set("href", "doc1.html");
setTimeout(d.getTestCallback(function(){
doh.f(loadEvents.innerPane1, "innerPane1 shouldn't be loaded");
}), 750);
return d;
}
},
{
name: "reset href in hidden pane, bcPane2",
timeout: 2000,
runTest: function(){
// Resetting an href on a hidden pane should have no effect
var d = new doh.Deferred();
registry.byId("bcPane2").set("href", "doc0.html");
setTimeout(d.getTestCallback(function(){
doh.f(loadEvents.bcPane2, "bcPane2 shouldn't be loaded");
}), 750);
return d;
}
},
{
name: "selecting ContentPane causes it to load",
timeout: 10000,
runTest: function(){
var pane2 = registry.byId("pane2");
doh.f(pane2.onLoadDeferred.isResolved(), "pane2 not loaded yet");
registry.byId("outerTC").selectChild(pane2);
return pane2.onLoadDeferred;
}
},
{
name: "selecting a TabContainer causes its selected child to load",
timeout: 10000,
runTest: function(){
var innerPane1 = registry.byId("innerPane1");
doh.f(innerPane1.onLoadDeferred.isResolved(), "innerPane1 not loaded yet");
registry.byId("outerTC").selectChild(registry.byId("innerTC"));
return innerPane1.onLoadDeferred;
}
},
{
name: "selecting a BorderContainer causes its children to load",
timeout: 10000,
runTest: function(){
doh.f(registry.byId("bcPane1").onLoadDeferred.isResolved(), "bcPane1 not loaded");
doh.f(registry.byId("bcPane2").onLoadDeferred.isResolved(), "bcPane1 not loaded");
registry.byId("outerTC").selectChild(registry.byId("bc"));
return registry.byId("bcPane1").onLoadDeferred.then(function(){
return registry.byId("bcPane2").onLoadDeferred;
});
}
}
]);
doh.register("resize events", [
// Test that when ContentPane w/single resizable child is shown,
// the child is sized to match the ContentPane
{
name: "single child",
runTest: function(){
var child = registry.byId("singleChildResizable");
doh.is(0, child._resized, "hasn't been shown yet so no resize events");
registry.byId("resizeTC").selectChild(registry.byId("singleChildPane"));
doh.t(child._resized, "got resize event"); // note: should only be 1 but currently gets 2
doh.t(child._resizeArgs && child._resizeArgs.length, "got size specified");
var size = child._resizeArgs[0];
doh.t(size && size.h, "non-0 height specified");
doh.t(size && size.w, "non-0 width specified");
}
},
// Test that when ContentPane w/multiple resizable children is shown,
// the children aren't sized to match the ContentPane, but we do call
// resize on them so they can lay themselves out
{
name: "multiple children",
runTest: function(){
var child1 = registry.byId("multipleChildResizable1"),
child2 = registry.byId("multipleChildResizable2");
doh.is(0, child1._resized, "child1 hasn't been shown yet so no resize events");
doh.is(0, child2._resized, "child2 hasn't been shown yet so no resize events");
registry.byId("resizeTC").selectChild(registry.byId("multipleChildPanes"));
doh.t(child1._resized, "got resize event for child1");
doh.is(0, child1._resizeArgs && child1._resizeArgs.length, "no size specified for child1");
doh.t(child2._resized, "got resize event for child2");
doh.is(0, child2._resizeArgs && child2._resizeArgs.length, "no size specified for child2")
}
},
{
name: "single resizable widget, plus invisible widget",
runTest: function(){
var child = registry.byId("fss2_rc");
doh.t(child._resized, "got resize event for child");
doh.is(1, child._resizeArgs && child._resizeArgs.length, "size specified");
doh.is("fss2_rc", registry.byId("fss2")._singleChild.id, "the resizable child memoed")
}
},
{
name: "multiple resizable widgets in form with size",
runTest: function(){
var child1 = registry.byId("fsmc1"),
child2 = registry.byId("fsmc2");
doh.t(child1._resized, "got resize event for child1");
doh.is(0, child1._resizeArgs && child1._resizeArgs.length, "no size specified for child1");
doh.t(child2._resized, "got resize event for child2");
doh.is(0, child2._resizeArgs && child2._resizeArgs.length, "no size specified for child2");
}
},
{
name: "single resizable widget, single non-resizable (but visible) widget",
runTest: function(){
var child = registry.byId("fsm2_rc");
doh.t(child._resized, "got resize event for child");
doh.is(0, child._resizeArgs && child._resizeArgs.length, "no size specified for child");
}
},
// Test that resize event works correctly for href w/single layout widget
{
name: "single resizable href",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
var singleChildHref = registry.byId("singleChildHref");
registry.byId("resizeTC").selectChild(singleChildHref);
// Wait for load events to occur (after fetching URL's)
singleChildHref.onLoadDeferred.then(d.getTestCallback(function(){
// Check top level border container got sized to fit ContentPane
var child = registry.byId("singleChildHrefBorderContainer");
doh.t(child, "href was loaded and top level BorderContainer was created");
doh.t(layoutResizes["singleChildHrefBorderContainer"], "got resize event");
doh.t(layoutResizes["singleChildHrefBorderContainer"][0].length, "got size specified");
var size = layoutResizes["singleChildHrefBorderContainer"][0][0];
doh.t(size && size.h, "non-0 height specified");
doh.t(size && size.w, "non-0 width specified");
// Check that resize() events also trickled down to inner TabContainer
var child2 = registry.byId("singleChildHrefInnerTabContainer");
doh.t(child2, "inner TabContainer was created");
doh.t(layoutResizes["singleChildHrefInnerTabContainer"], "got resize event");
doh.is(0, layoutResizes["singleChildHrefInnerTabContainer"][0].length, "no size specified")
}));
return d;
}
},
// Test that resize event works correctly for href w/multiple layout widgets
{
name: "multiple resizable href",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
var multipleChildHref = registry.byId("multipleChildHref")
registry.byId("resizeTC").selectChild(multipleChildHref);
// Wait for load events to occur (after fetching URL's)
multipleChildHref.onLoadDeferred.then(d.getTestCallback(function(){
// Check that resize() done on TabContainer
var child = registry.byId("multipleChildHrefTabContainer");
doh.t(child, "TabContainer was created");
doh.t(layoutResizes["multipleChildHrefTabContainer"], "got resize event");
doh.is(0, layoutResizes["multipleChildHrefTabContainer"][0].length, "no size specified")
}));
return d;
}
},
// Test that resize() is called on resizable children hidden inside of a form widget
// where the form widget is inside a layout container
{
name: "multiple resizable elements hidden in form in TabContainer",
runTest: function(){
var child1 = registry.byId("resizableInForm1"),
child2 = registry.byId("resizableInForm2");
doh.is(0, child1._resized, "child1 hasn't been shown yet so no resize events");
doh.is(1, child1.history.length, "child1 # of history events (before show)");
doh.is("started", child1.history[0], "child1 history");
doh.is(0, child2._resized, "child2 hasn't been shown yet so no resize events");
doh.is(1, child1.history.length, "child2 # of history events (before show)");
doh.is("started", child2.history[0], "child2 history");
registry.byId("resizeTC").selectChild(registry.byId("multipleResizableInForm"));
doh.t(child1._resized, "got resize event for child1");
doh.is(0, child1._resizeArgs && child1._resizeArgs.length, "no size specified for child1");
doh.t(child2._resized, "got resize event for child2");
doh.is(0, child2._resizeArgs && child2._resizeArgs.length, "no size specified for child2")
}
},
{
name: "single resizable element hidden in form in TabContainer",
runTest: function(){
var child = registry.byId("resizableInForm0");
doh.is(0, child._resized, "child hasn't been shown yet so no resize events");
doh.is(1, child.history.length, "child # of history events (before show)");
doh.is("started", child.history[0], "child history");
registry.byId("resizeTC").selectChild(registry.byId("singleResizableInForm"));
doh.t(child._resized, "got resize event for child");
doh.is(1, child._resizeArgs && child._resizeArgs.length, "size specified")
}
},
// Test that form where parent *isn't* a layout container calls startup() and resize()
// on it's child layout widgets
{
name: "single resizable element in form with size",
runTest: function(){
var child = registry.byId("fssc");
doh.t(child._resized, "got resize event for child");
doh.is(1, child._resizeArgs && child._resizeArgs.length, "size specified")
}
},
{
name: "multiple resizable elements in form with size",
runTest: function(){
var child1 = registry.byId("fsmc1"),
child2 = registry.byId("fsmc2");
doh.t(child1._resized, "got resize event for child1");
doh.is(0, child1._resizeArgs && child1._resizeArgs.length, "no size specified for child1");
doh.t(child2._resized, "got resize event for child2");
doh.is(0, child2._resizeArgs && child2._resizeArgs.length, "no size specified for child2")
}
},
{
name: "single resizable elements in form with no size, doLayout=false",
runTest: function(){
var child = registry.byId("fnsc");
doh.t(child._resized, "got resize event for child");
doh.is(0, child._resizeArgs && child._resizeArgs.length, "no size specified for child")
}
},
{
name: "multiple resizable elements in form with no size",
runTest: function(){
var child1 = registry.byId("fnmc1"),
child2 = registry.byId("fnmc2");
doh.t(child1._resized, "got resize event for child1");
doh.is(0, child1._resizeArgs && child1._resizeArgs.length, "no size specified for child1");
doh.t(child2._resized, "got resize event for child2");
doh.is(0, child2._resizeArgs && child2._resizeArgs.length, "no size specified for child2")
}
}
]);
// Make sure that TitlePane loads it's href at the appropriate time, and also that
// it calls resize on it's children at the appropriate time (since that's the contract
// for layout widgets, and ContentPane is acting as a layout widget).
doh.register("TitlePane", [
/***
* test for #8197, uncomment when it's fixed.
{
name: "initially open, single child",
timeout: 2000,
runTest: function(){
var d = new doh.Deferred();
var tp = registry.byId("otpHsc");
// Allow time for href to load
setTimeout(d.getTestCallback(function(){
// Check that href loaded
doh.is(1, loadEvents["otpHsc"], "otpHsc loaded on page load");
// Check that resize() done on child
doh.t(layoutResizes["otpHscBorderContainer"], "got resize event");
doh.is(0, layoutResizes["otpHscBorderContainer"][0].length, "no size specified")
}), 750);
return d;
}
},
*/
{
name: "initially open, href multiple children",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
var tp = registry.byId("otpHmc");
// Allow time for href to load
tp.onLoadDeferred.then(d.getTestCallback(function(){
// Check that resize() done on children
doh.t(layoutResizes["otpHmcBorderContainer"], "got resize event for BC");
doh.t(layoutResizes["otpHmcTabContainer"], "got resize event for TC");
doh.is(0, layoutResizes["otpHmcBorderContainer"][0].length, "no size specified for BC")
}));
return d;
}
},
{
name: "initially open, multiple children",
runTest: function(){
var tp = registry.byId("otpMc");
// Check that resize() done on children
doh.t(registry.byId("otpMc_child1")._resized, "got resize event for child1");
doh.t(registry.byId("otpMc_child2")._resized, "got resize event for child2");
}
},
{
name: "initially closed, href multiple children",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
doh.f(loadEvents["ctpHmc"], "ctpHmc load deferred until open");
var tp = registry.byId("ctpHmc");
tp.set("open", true);
// Allow time for href to load, pane to expand, and resize to be called on children
tp.onLoadDeferred.then(d.getTestCallback(function(){
// Check that resize() done on children
doh.t(layoutResizes["ctpHmcBorderContainer"], "got resize event for BC");
doh.t(layoutResizes["ctpHmcTabContainer"], "got resize event for TC");
doh.is(0, layoutResizes["ctpHmcBorderContainer"][0].length, "no size specified for BC")
}));
return d;
}
},
{
name: "initially closed, multiple children",
timeout: 2000,
runTest: function(){
var d = new doh.Deferred();
doh.f(registry.byId("ctpMc_child1")._resized, "resize event for child1 deferred");
doh.f(registry.byId("ctpMc_child2")._resized, "resize event for child2 deferred");
var tp = registry.byId("ctpMc");
tp.set("open", true);
// Allow time for pane to expand, and resize to be called on children
setTimeout(d.getTestCallback(function(){
// Check that resize() done on children
doh.t(registry.byId("ctpMc_child1")._resized, "got resize event for child1");
doh.t(registry.byId("ctpMc_child2")._resized, "got resize event for child2");
}), 750);
return d;
}
}
]);
// Make sure that Dialog loads it's href when shown, and also that
// it calls resize on its children when shown (since that's the contract
// for layout widgets, and ContentPane is acting as a layout widget).
doh.register("Dialog", [
{
name: "href multiple children",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
doh.f(loadEvents["dlgHmc"], "dlgHmc load deferred until open");
var dlg = registry.byId("dlgHmc");
dlg.show();
// Allow time for href to load, pane to expand, and resize to be called on children
dlg.onLoadDeferred.then(d.getTestCallback(function(){
// Check that href loaded
doh.is(1, loadEvents["dlgHmc"], "dlgHmc loaded when expanded");
// Check that resize() done on children
doh.t(layoutResizes["dlgHmcBorderContainer"], "got resize event for BC");
doh.t(layoutResizes["dlgHmcTabContainer"], "got resize event for TC");
doh.is(0, layoutResizes["dlgHmcBorderContainer"][0].length, "no size specified for BC")
}));
return d;
},
tearDown: function(){
// Note: this currently triggers an CancelError to the console;
// we are apparently canceling a Deferred that has already been resolved.
var dlg = registry.byId("dlgHmc");
dlg.hide();
}
},
{
name: "multiple inlined children",
timeout: 2000,
runTest: function(){
var d = new doh.Deferred();
doh.f(registry.byId("dlgMc_child1")._resized, "resize event for child1 deferred");
doh.f(registry.byId("dlgMc_child2")._resized, "resize event for child2 deferred");
var dlg = registry.byId("dlgMc");
dlg.show();
// Allow time for pane to expand, and resize to be called on children
setTimeout(d.getTestCallback(function(){
// Check that resize() done on children
doh.t(registry.byId("dlgMc_child1")._resized, "got resize event for child1");
doh.t(registry.byId("dlgMc_child2")._resized, "got resize event for child2");
}), 750);
return d;
},
tearDown: function(){
var dlg = registry.byId("dlgMc");
dlg.hide();
}
}
]);
// Test that resizing a TabContainer doesn't reload href (when refreshOnShow=true), bug #8197
doh.register("TabContainer resize/reload tests", [
{
name: "initial conditions",
timeout: 10000,
runTest: function(){
// Wait for load events to occur (after fetching URL's)
return registry.byId("reloadTC_pane1").onLoadDeferred;
}
},
{
name: "reload on reshow",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
var reloadTC = registry.byId("reloadTC"),
pane1 = registry.byId("reloadTC_pane1"),
pane2 = registry.byId("reloadTC_pane2");
var originalPane1OnLoadDeferred = pane1.onLoadDeferred;
reloadTC.selectChild(pane2);
reloadTC.selectChild(pane1);
doh.isNot(originalPane1OnLoadDeferred, pane1.onLoadDeferred,
"selecting pane1 again created new onLoadDeferred");
return pane1.onLoadDeferred;
}
},
{
name: "no reload on TabContainer resize",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
registry.byId("reloadTC").resize({h: 300, w: 300});
setTimeout(d.getTestCallback(function(){
doh.is(2, loadEvents.reloadTC_pane1, "pane1 not loaded again");
}), 750);
return d;
}
}
]);
doh.run();
});
</script>
</head>
<body role="main">
<h1>dijit/layout/ContentPane layout related DOH test</h1>
<p>
Tests ContentPane in it's role as a layout widget, including as child of another layout widgets (especially TabContainer).
</p>
<h2>Tests that href gets loaded when ContentPane is first made visible</h2>
<div id="outerTC" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='style:"width: 880px; height: 200px;","aria-label":"outerTC"'>
<div id="pane1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='href:"doc0.html", title:"Initially Selected", onLoad:myOnLoad'>
initially selected pane
</div>
<div id="pane2" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='href:"doc1.html", title:"Initially Hidden", onLoad:myOnLoad'>
unselected pane
</div>
<div id="innerTC" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='nested:true, title:"Nested TabContainer"'>
<div id="innerPane1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='href:"doc0.html", title:"Initially Selected", onLoad:myOnLoad'>
initially selected inner pane
</div>
<div id="innerPane2" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='href:"doc1.html", title:"Initially Hidden", onLoad:myOnLoad'>
unselected pane
</div>
</div>
<div id="bc" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='title:"BorderContainer"'>
<div id="bcPane1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='href:"doc0.html", region:"left", style:"width: 200px;", onLoad:myOnLoad'>
left pane
</div>
<div id="bcPane2" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='href:"doc1.html", region:"center", onLoad:myOnLoad'>
center pane
<!-- when this ContentPane is shown each of these widgets should get a resize()
call w/no size specification -->
<div id="bcResizable1" data-dojo-type="ResizableWidget" ></div>
<div id="bcResizable2" data-dojo-type="ResizableWidget" ></div>
</div>
</div>
</div>
<h2>Tests for resizing in a layout container hierarchy</h2>
<div id="resizeTC" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='style:"width: 880px; height: 200px;","aria-label":"resizeTC"'>
<div id="resizePane1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Initially Selected", onLoad:myOnLoad'>
initially selected pane
</div>
<div id="singleChildPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Single ResizableChild", onLoad:myOnLoad'>
<div id="singleChildResizable" data-dojo-type="ResizableWidget" ></div>
</div>
<div id="multipleChildPanes" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Multiple ResizableChild", onLoad:myOnLoad'>
<div id="multipleChildResizable1" data-dojo-type="ResizableWidget" ></div>
<div style="border: groove blue medium;">
<span>hide the second widget to see if ContentPane can still find it</span>
<div id="multipleChildResizable2" data-dojo-type="ResizableWidget" ></div>
<span>ending text</span>
</div>
</div>
<div id="multipleResizableInForm" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Multiple resizable in form", onLoad:myOnLoad'>
<div data-dojo-type="dijit/form/Form">
<div id="resizableInForm1" data-dojo-type="ResizableWidget" ></div>
<div id="resizableInForm2" data-dojo-type="ResizableWidget" ></div>
</div>
</div>
<div id="singleResizableInForm" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Single resizable in form", onLoad:myOnLoad'>
<div data-dojo-type="dijit/form/Form">
<div id="resizableInForm0" data-dojo-type="ResizableWidget" ></div>
</div>
</div>
<div id="singleChildHref" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Href Single Child",
href:"borderContainer.php?id=singleChildHref", onLoad:myOnLoad'></div>
<div id="multipleChildHref" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Href Multiple Children",
href:"multipleLayoutWidgets.php?id=multipleChildHref", onLoad:myOnLoad'></div>
</div>
<h2>Size on Form, single nested layout widget</h2>
<form data-dojo-type="dijit/form/Form" style="height:100px; width: 100px; border: medium inset gray; padding: 10px;" id="fss">
<div data-dojo-type="ResizableWidget" id="fssc"></div>
</form>
<form data-dojo-type="dijit/form/Form" style="height:100px; width: 100px; border: medium inset gray; padding: 10px;" id="fss2">
<!-- this form has one resizable child, and an invisible child, so the resizable child should be expanded -->
<div id="fss2_rc" data-dojo-type="ResizableWidget">resizable</div>
<div id="fss2_ic" data-dojo-type="dojo/store/Memory"></div>
</form>
<h2>Size on Form, multiple nested widgets</h2>
<!-- two layout widgets -->
<form data-dojo-type="dijit/form/Form" style="height:250px; width: 150px; border: medium inset gray; padding: 10px;" id="fsm">
<div data-dojo-type="ResizableWidget" style="width: 100px; height: 100px; border: 1px solid black;" id="fsmc1">
child #1 (100x100)
</div>
<div data-dojo-type="ResizableWidget" style="width: 100px; height: 100px; border: 1px solid black;" id="fsmc2">
child #2 (100x100)
</div>
</form>
<form data-dojo-type="dijit/form/Form" style="height:250px; width: 150px; border: medium inset gray; padding: 10px;" id="fsm2">
<div id="fsm2_vc" data-dojo-type="dijit/_WidgetBase">visible</div>
<div id="fsm2_rc" data-dojo-type="ResizableWidget">resizable</div>
</form>
<h2>No size on Form, single nested layout widgets</h2>
<form data-dojo-type="dijit/form/Form" style="border: medium inset gray; padding: 10px;" data-dojo-props="doLayout: false" id="fns">
<div data-dojo-type="ResizableWidget" style="height:200px; width: 400px;" id="fnsc">
</div>
</form>
<h2>No size on Form, multiple nested layout widget</h2>
<form data-dojo-type="dijit/form/Form" style="border: medium inset gray; padding: 10px;" id="fnm">
<div data-dojo-type="ResizableWidget" style="width: 100px; height: 100px; border: 1px solid black;" id="fnmc1">
child #1 (100x100)
</div>
<div data-dojo-type="ResizableWidget" style="width: 100px; height: 100px; border: 1px solid black;" id="fnmc2">
child #2 (100x100)
</div>
</form>
<h2>Tests that ContentPane resize doesn't trigger reload</h2>
<div id="reloadTC" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='style:"width: 880px; height: 200px;","aria-label":"outerTC"'>
<div id="reloadTC_pane1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='href:"doc0.html", title:"Initially Selected", onLoad:myOnLoad, refreshOnShow:true'>
initially selected pane
</div>
<div id="reloadTC_pane2" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='href:"doc1.html", title:"Initially Hidden", onLoad:myOnLoad'>
unselected pane
</div>
</div>
<h2>Test the ContentPane loads href and resizes children (as per it's contract a layout widget)
when it's not a child of a layout container itself</h2>
<div id="ctpHsc" data-dojo-type="dijit/TitlePane" data-dojo-props='title:"Closed TitlePane Href Single Child", open:false,
href:"borderContainer.php?id=ctpHsc&sized=true", onLoad:myOnLoad'></div>
<br><br>
<div id="ctpHmc" data-dojo-type="dijit/TitlePane" data-dojo-props='title:"Closed TitlePane Href Multiple Children", open:false,
href:"multipleLayoutWidgets.php?id=ctpHmc", onLoad:myOnLoad'></div>
<br><br>
<div id="otpHsc" data-dojo-type="dijit/TitlePane" data-dojo-props='title:"Opened TitlePane Href Single Child",
href:"borderContainer.php?id=otpHsc&sized=true", onLoad:myOnLoad'></div>
<br><br>
<div id="otpHmc" data-dojo-type="dijit/TitlePane" data-dojo-props='title:"Opened TitlePane Href Multiple Children",
href:"multipleLayoutWidgets.php?id=otpHmc", onLoad:myOnLoad'></div>
<br><br>
<div id="otpMc" data-dojo-type="dijit/TitlePane" data-dojo-props='title:"Opened TitlePane Multiple Children"'>
<!-- these widgets should get a resize on page load -->
<div id="otpMc_child1" data-dojo-type="ResizableWidget" ></div>
<div id="otpMc_child2" data-dojo-type="ResizableWidget" ></div>
</div>
<br><br>
<div id="ctpMc" data-dojo-type="dijit/TitlePane" data-dojo-props='title:"Closed TitlePane Multiple Children", open:false'>
<!-- these widgets should get a resize() when the TitlePane is opened -->
<div id="ctpMc_child1" data-dojo-type="ResizableWidget" ></div>
<div id="ctpMc_child2" data-dojo-type="ResizableWidget" ></div>
</div>
<br><br>
<div id="dlgHmc" data-dojo-type="dijit/Dialog" data-dojo-props='title:"Dialog Href Multiple Children",
href:"multipleLayoutWidgets.php?id=dlgHmc", onLoad:myOnLoad'></div>
<div id="dlgMc" data-dojo-type="dijit/Dialog" data-dojo-props='title:"Dialog Multiple Children"'>
<!-- these widgets should get a resize() when the Dialog is opened -->
<div id="dlgMc_child1" data-dojo-type="ResizableWidget" ></div>
<div id="dlgMc_child2" data-dojo-type="ResizableWidget" ></div>
</div>
</body>
</html>