Updated
This commit is contained in:
Éric Lemoine
803
master/examples/ContentPaneLayout.html
Normal file
803
master/examples/ContentPaneLayout.html
Normal file
@@ -0,0 +1,803 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||
<title>ContentPane layout-related DOH test</title>
|
||||
<style type="text/css">
|
||||
@import "../../themes/claro/document.css";
|
||||
@import "../../themes/claro/claro.css";
|
||||
@import "../css/dijitTests.css";
|
||||
|
||||
.resizableWidget {
|
||||
border: 1px dashed red;
|
||||
background-color: #C0E209;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dojo/dojo.js"
|
||||
data-dojo-config="isDebug: true"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
dojo.require("doh.runner");
|
||||
dojo.require("dojo.parser");
|
||||
|
||||
dojo.require("dijit._Widget");
|
||||
dojo.require("dijit._TemplatedMixin");
|
||||
dojo.require("dijit.layout.ContentPane");
|
||||
dojo.require("dijit.layout.TabContainer");
|
||||
dojo.require("dijit.layout.BorderContainer");
|
||||
dojo.require("dijit.TitlePane");
|
||||
dojo.require("dijit.form.Form");
|
||||
dojo.require("dijit.Dialog");
|
||||
|
||||
// widgets used in doc loaded via href
|
||||
dojo.require("dijit.form.ComboBox");
|
||||
dojo.require("dijit.form.Button");
|
||||
|
||||
// Keep track of which panes have had a load event, and how
|
||||
// many load events have occurred for those panes
|
||||
var loadEvents = {
|
||||
};
|
||||
function myOnLoad(){
|
||||
console.log("onload for " + this);
|
||||
loadEvents[this.id] = (loadEvents[this.id] || 0) + 1;
|
||||
}
|
||||
|
||||
dojo.ready(function(){
|
||||
|
||||
// create a do nothing, only for test widget
|
||||
dojo.declare("ResizableWidget",
|
||||
[dijit._Widget, dijit._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){
|
||||
dojo.marginBox(this.domNode, newSize);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 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
|
||||
var startups = {};
|
||||
dojo.connect(dijit._Widget.prototype, "startup", function(){
|
||||
startups[this.id] = (startups[this.id] || 0) + 1;
|
||||
});
|
||||
|
||||
doh.register("parse", function(){
|
||||
dojo.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: 5000,
|
||||
runTest: function(t){
|
||||
var d = new doh.Deferred();
|
||||
// Wait for load events to occur (after fetching URL's)
|
||||
setTimeout(d.getTestCallback(function(){
|
||||
var pane1 = dijit.byId("pane1"),
|
||||
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.
|
||||
}), 4000);
|
||||
return d;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Test that ContentPanes defer their load until they are shown
|
||||
doh.register("load events",
|
||||
[
|
||||
{
|
||||
name: "initial conditions",
|
||||
timeout: 5000,
|
||||
runTest: function(t){
|
||||
var d = new doh.Deferred();
|
||||
// Wait for load events to occur (after fetching URL's)
|
||||
setTimeout(d.getTestCallback(function(){
|
||||
doh.is(1, loadEvents.pane1, "pane1");
|
||||
dojo.forEach(["pane2", "innerPane1", "innerPane2", "bcPane1", "bcPane2"], function(pane){
|
||||
doh.f(loadEvents[pane], pane, pane + " shouldn't be loaded");
|
||||
});
|
||||
}), 4000);
|
||||
return d;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "reset href in hidden pane, pane2",
|
||||
timeout: 2000,
|
||||
runTest: function(t){
|
||||
// Resetting an href on a hidden pane should have no effect
|
||||
var d = new doh.Deferred();
|
||||
|
||||
dijit.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(t){
|
||||
// Resetting an href on a hidden pane should have no effect
|
||||
var d = new doh.Deferred();
|
||||
|
||||
dijit.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(t){
|
||||
// Resetting an href on a hidden pane should have no effect
|
||||
var d = new doh.Deferred();
|
||||
|
||||
dijit.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: 5000,
|
||||
runTest: function(t){
|
||||
var d = new doh.Deferred();
|
||||
|
||||
dijit.byId("outerTC").selectChild(dijit.byId("pane2"));
|
||||
setTimeout(d.getTestCallback(function(){
|
||||
doh.is(1, loadEvents.pane2, "pane2");
|
||||
}), 4000);
|
||||
|
||||
return d;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "selecting a TabContainer causes it's selected child to load",
|
||||
timeout: 5000,
|
||||
runTest: function(t){
|
||||
var d = new doh.Deferred();
|
||||
|
||||
doh.f(loadEvents.innerPane1, "innerPane1 not loaded yet");
|
||||
dijit.byId("outerTC").selectChild(dijit.byId("innerTC"));
|
||||
setTimeout(d.getTestCallback(function(){
|
||||
doh.is(1, loadEvents.innerPane1, "innerPane1 now loaded");
|
||||
}), 4000);
|
||||
|
||||
return d;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "selecting a BorderContainer causes it's children to load",
|
||||
timeout: 5000,
|
||||
runTest: function(t){
|
||||
var d = new doh.Deferred();
|
||||
|
||||
//doh.f(loadEvents.bcPane1, "bcPane1 not loaded");
|
||||
//doh.f(loadEvents.bcPane2, "bcPane2 not loaded");
|
||||
|
||||
dijit.byId("outerTC").selectChild(dijit.byId("bc"));
|
||||
|
||||
setTimeout(d.getTestCallback(function(){
|
||||
doh.is(1, loadEvents.bcPane1, "bcPane1");
|
||||
doh.is(1, loadEvents.bcPane2, "bcPane2");
|
||||
}), 4000);
|
||||
|
||||
return d;
|
||||
}
|
||||
}
|
||||
]
|
||||
);
|
||||
|
||||
// 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
|
||||
var layoutResizes = {};
|
||||
dojo.connect(dijit.layout._LayoutWidget.prototype, "resize", function(){
|
||||
// this is the pointer to the widget, and arguments are newsize/curSize args to resize()
|
||||
var ary = layoutResizes[this.id];
|
||||
if(!ary){
|
||||
ary = layoutResizes[this.id] = [];
|
||||
}
|
||||
ary.push(arguments);
|
||||
});
|
||||
|
||||
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(t){
|
||||
var child = dijit.byId("singleChildResizable");
|
||||
doh.is(0, child._resized, "hasn't been shown yet so no resize events");
|
||||
|
||||
dijit.byId("resizeTC").selectChild(dijit.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(t){
|
||||
var child1 = dijit.byId("multipleChildResizable1"),
|
||||
child2 = dijit.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");
|
||||
|
||||
dijit.byId("resizeTC").selectChild(dijit.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")
|
||||
}
|
||||
},
|
||||
|
||||
// Test that resize event works correctly for href w/single layout widget
|
||||
{
|
||||
name: "single resizable href",
|
||||
timeout: 5000,
|
||||
runTest: function(t){
|
||||
var d = new doh.Deferred();
|
||||
|
||||
dijit.byId("resizeTC").selectChild(dijit.byId("singleChildHref"));
|
||||
|
||||
// Wait for load events to occur (after fetching URL's)
|
||||
setTimeout(d.getTestCallback(function(){
|
||||
// Check top level border container got sized to fit ContentPane
|
||||
var child = dijit.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 = dijit.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")
|
||||
}), 4000);
|
||||
return d;
|
||||
}
|
||||
},
|
||||
|
||||
// Test that resize event works correctly for href w/multiple layout widgets
|
||||
{
|
||||
name: "multiple resizable href",
|
||||
timeout: 5000,
|
||||
runTest: function(t){
|
||||
var d = new doh.Deferred();
|
||||
|
||||
dijit.byId("resizeTC").selectChild(dijit.byId("multipleChildHref"));
|
||||
|
||||
// Wait for load events to occur (after fetching URL's)
|
||||
setTimeout(d.getTestCallback(function(){
|
||||
// Check that resize() done on TabContainer
|
||||
var child = dijit.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")
|
||||
}), 4000);
|
||||
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(t){
|
||||
var child1 = dijit.byId("resizableInForm1"),
|
||||
child2 = dijit.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");
|
||||
|
||||
dijit.byId("resizeTC").selectChild(dijit.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(t){
|
||||
var child = dijit.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");
|
||||
|
||||
dijit.byId("resizeTC").selectChild(dijit.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(t){
|
||||
var child = dijit.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(t){
|
||||
var child1 = dijit.byId("fsmc1"),
|
||||
child2 = dijit.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(t){
|
||||
var child = dijit.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(t){
|
||||
var child1 = dijit.byId("fnmc1"),
|
||||
child2 = dijit.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(t){
|
||||
var d = new doh.Deferred();
|
||||
|
||||
var tp = dijit.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: 5000,
|
||||
runTest: function(t){
|
||||
var d = new doh.Deferred();
|
||||
|
||||
var tp = dijit.byId("otpHmc");
|
||||
|
||||
// Allow time for href to load
|
||||
setTimeout(d.getTestCallback(function(){
|
||||
// Check that href loaded
|
||||
doh.is(1, loadEvents["otpHmc"], "otpHmc loaded on page load");
|
||||
|
||||
// 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")
|
||||
}), 4000);
|
||||
|
||||
return d;
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: "initially open, multiple children",
|
||||
runTest: function(t){
|
||||
var tp = dijit.byId("otpMc");
|
||||
|
||||
// Check that resize() done on children
|
||||
doh.t(dijit.byId("otpMc_child1")._resized, "got resize event for child1");
|
||||
doh.t(dijit.byId("otpMc_child2")._resized, "got resize event for child2");
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: "initially closed, href multiple children",
|
||||
timeout: 5000,
|
||||
runTest: function(t){
|
||||
var d = new doh.Deferred();
|
||||
|
||||
doh.f(loadEvents["ctpHmc"], "ctpHmc load deferred until open");
|
||||
|
||||
var tp = dijit.byId("ctpHmc");
|
||||
tp.set("open", true);
|
||||
|
||||
// Allow time for href to load, pane to expand, and resize to be called on children
|
||||
setTimeout(d.getTestCallback(function(){
|
||||
// Check that href loaded
|
||||
doh.is(1, loadEvents["ctpHmc"], "ctpHmc loaded when expanded");
|
||||
|
||||
// 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")
|
||||
}), 4000);
|
||||
|
||||
return d;
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: "initially closed, multiple children",
|
||||
timeout: 2000,
|
||||
runTest: function(t){
|
||||
var d = new doh.Deferred();
|
||||
|
||||
doh.f(dijit.byId("ctpMc_child1")._resized, "resize event for child1 deferred");
|
||||
doh.f(dijit.byId("ctpMc_child2")._resized, "resize event for child2 deferred");
|
||||
|
||||
var tp = dijit.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(dijit.byId("ctpMc_child1")._resized, "got resize event for child1");
|
||||
doh.t(dijit.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 it's 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: 5000,
|
||||
runTest: function(t){
|
||||
var d = new doh.Deferred();
|
||||
|
||||
doh.f(loadEvents["dlgHmc"], "dlgHmc load deferred until open");
|
||||
|
||||
var dlg = dijit.byId("dlgHmc");
|
||||
dlg.show();
|
||||
|
||||
// Allow time for href to load, pane to expand, and resize to be called on children
|
||||
setTimeout(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")
|
||||
}), 4000);
|
||||
|
||||
return d;
|
||||
},
|
||||
tearDown: function(){
|
||||
var dlg = dijit.byId("dlgHmc");
|
||||
dlg.hide();
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: "multiple inlined children",
|
||||
timeout: 2000,
|
||||
runTest: function(t){
|
||||
var d = new doh.Deferred();
|
||||
|
||||
doh.f(dijit.byId("dlgMc_child1")._resized, "resize event for child1 deferred");
|
||||
doh.f(dijit.byId("dlgMc_child2")._resized, "resize event for child2 deferred");
|
||||
|
||||
var dlg = dijit.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(dijit.byId("dlgMc_child1")._resized, "got resize event for child1");
|
||||
doh.t(dijit.byId("dlgMc_child2")._resized, "got resize event for child2");
|
||||
}), 750);
|
||||
|
||||
return d;
|
||||
},
|
||||
tearDown: function(){
|
||||
var dlg = dijit.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: 5000,
|
||||
runTest: function(t){
|
||||
var d = new doh.Deferred();
|
||||
// Wait for load events to occur (after fetching URL's)
|
||||
setTimeout(d.getTestCallback(function(){
|
||||
doh.is(1, loadEvents.reloadTC_pane1, "pane1 loaded");
|
||||
}), 4000);
|
||||
return d;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "reload on reshow",
|
||||
timeout: 5000,
|
||||
runTest: function(t){
|
||||
var d = new doh.Deferred();
|
||||
|
||||
dijit.byId("reloadTC").selectChild(dijit.byId("reloadTC_pane2"));
|
||||
dijit.byId("reloadTC").selectChild(dijit.byId("reloadTC_pane1"));
|
||||
setTimeout(d.getTestCallback(function(){
|
||||
doh.is(2, loadEvents.reloadTC_pane1, "pane1 loaded again");
|
||||
}), 4000);
|
||||
return d;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "no reload on TabContainer resize",
|
||||
timeout: 5000,
|
||||
runTest: function(t){
|
||||
var d = new doh.Deferred();
|
||||
|
||||
dijit.byId("reloadTC").resize({h: 300, w: 300});
|
||||
setTimeout(d.getTestCallback(function(){
|
||||
doh.is(2, loadEvents.reloadTC_pane1, "pane1 not loaded again");
|
||||
}), 4000);
|
||||
return d;
|
||||
}
|
||||
}
|
||||
]
|
||||
);
|
||||
|
||||
doh.run();
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="claro">
|
||||
<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;"'>
|
||||
<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;"'>
|
||||
<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 widgets</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>
|
||||
|
||||
<h2>Size on Form, multiple nested layout widget</h2>
|
||||
<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>
|
||||
|
||||
<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;"'>
|
||||
<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>
|
||||
Reference in New Issue
Block a user