You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
830 lines
31 KiB
830 lines
31 KiB
<!DOCTYPE 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>
|
|
|