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

Last change on this file since 483 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 17.5 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
5        <title>ContentPane DOH test</title>
6        <style type="text/css">
7                @import "../../themes/claro/document.css";
8                @import "../../themes/claro/claro.css";
9                @import "../css/dijitTests.css";
10
11                .box {
12                        border: 1px solid black;
13                        padding: 8px;
14                }
15
16                .dijitTestWidget {
17                        border: 1px dashed red;
18                        background-color: #C0E209;
19                }
20        </style>
21
22        <script type="text/javascript" src="../../../dojo/dojo.js"
23                data-dojo-config="isDebug: true"></script>
24        <script type="text/javascript">
25                require([
26                        "doh/runner",
27                        "dojo/_base/array",
28                        "dojo/_base/declare",
29                        "dojo/dom",
30                        "dojo/data/ItemFileReadStore",
31                        "dojo/_base/NodeList",
32                        "dojo/parser",
33                        "dijit/registry",
34                        "dijit/_WidgetBase",
35                        "dijit/_TemplatedMixin",
36                        "dijit/_WidgetsInTemplateMixin",
37                        "dijit/_Container",
38                        "dijit/Dialog",
39                        "dijit/layout/_LayoutWidget",
40                        "dijit/layout/ContentPane",
41                        "dijit/layout/StackContainer",
42                        "dojo/domReady!"
43                ], function(doh, array, declare, dom, ItemFileReadStore, NodeList, parser,
44                                        registry, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _Container, Dialog, _LayoutWidget,
45                                        ContentPane, StackContainer){
46
47                        // create a do nothing, only for test widget
48                        declare("TestWidget",
49                                [_WidgetBase, _TemplatedMixin], {
50                                templateString: "<span class='dijitTestWidget'></span>"
51                        });
52
53                        doh.register("pane1", [
54                                {
55                                        name: "no_autoparse",
56                                        runTest: function(t){
57                                                if(registry.byId("pane1")){
58                                                        throw doh._AssertFailure("Page got autoparsed when it shouldn't");
59                                                }
60                                        }
61                                }
62                        ]);
63
64                        var pane2, MyWidget;
65
66                        doh.registerGroup("pane2", [
67                                {
68                                        name: "clear_content",
69                                        setUp: function(t){
70                                                pane2 = new ContentPane({
71                                                        preventCache: true
72                                                }, dom.byId("pane2"));
73                                                pane2.set("content", "");// pass undefined on purpose
74                                        },
75                                        runTest: function(t){
76                                                doh.is(0, _WidgetBase.prototype.getChildren.call(pane2).length);
77                                                doh.is("", pane2.domNode.innerHTML)
78                                        }
79                                },
80                                {
81                                        name: "setContent_String",
82                                        setUp: function(){
83                                                pane2.set("content", "");
84                                        },
85                                        runTest: function(t){
86                                                var msg = "<h3>a simple html string</h3>";
87                                                pane2.set("content", msg);
88                                                doh.is(msg, pane2.domNode.innerHTML.toLowerCase());
89                                        }
90                                },
91                                {
92                                        name: "setContent_DOMNode",
93                                        setUp: function(t){
94                                                var div = document.createElement('div');
95                                                div.innerHTML = "set('content', [DOMNode] )";
96                                                div.setAttribute('data-dojo-type', 'TestWidget');
97                                                pane2.set("content", div);
98                                        },
99                                        runTest: function(t){
100                                                doh.is(1, _WidgetBase.prototype.getChildren.call(pane2).length);
101                                        },
102                                        tearDown: function(t){
103                                                pane2.set("content", ""); // clear content for next test
104                                        }
105                                },
106                                {
107                                        name: "setContent_NodeList",
108                                        setUp: function(t){
109                                                var div = document.createElement('div');
110                                                div.innerHTML = "<div data-dojo-type='TestWidget'>above</div>"
111                                                                                +"Testing!<div><p><span><b>Deep nested</b></span></p></div>"
112                                                                                +"<div data-dojo-type='TestWidget'>below</div>";
113
114                                                var list = div.childNodes;
115                                                pane2.set("content", div.childNodes);
116                                        },
117                                        runTest: function(t){
118                                                doh.is(2, _WidgetBase.prototype.getChildren.call(pane2).length);
119
120                                                //regular DOM check
121                                                var children = pane2.domNode.childNodes;
122                                                doh.is(4, children.length);
123                                                doh.is("Testing!", children[1].nodeValue);
124                                                doh.is("div", children[2].nodeName.toLowerCase());
125                                                doh.is("<p><span><b>deep nested</b></span></p>", children[2].innerHTML.toLowerCase());
126                                        }
127                                },
128                                {
129                                        name: "setContent_dojo_NodeList",
130                                        setUp: function(t){
131                                                pane2.set("content", "");
132                                        },
133                                        runTest: function(t){
134                                                var div = document.createElement('div');
135                                                div.innerHTML = "<div data-dojo-type='TestWidget'>above</div>"
136                                                                        +"Testing!<div><p><span><b>Deep nested</b></span></p></div>"
137                                                                        +"<div data-dojo-type='TestWidget'>below</div>";
138
139                                                var list = new NodeList();
140                                                array.forEach(div.childNodes, function(n){
141                                                        list.push(n.cloneNode(true));
142                                                });
143
144                                                pane2.set("content", list);
145                                                doh.is(4, pane2.domNode.childNodes.length);
146                                        }
147                                },
148                                {
149                                        name: "extractContent",
150                                        runTest: function(t){
151                                                var def = pane2.extractContent;
152                                                doh.f(def);
153
154                                                // test that it's actually working
155                                                pane2.extractContent = true;
156                                                pane2.set("content", '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" '
157                                                        +'"http://www.w3.org/TR/html4/strict.dtd">'
158                                                        +'<html><head><style>body{font-weight:bold;}</style></head>'
159                                                        +'<body>extractContent test</body></html>');
160
161                                                doh.is("extractContent test", pane2.domNode.innerHTML);
162
163                                                // reset back to default
164                                                pane2.extractContent = def;
165                                        }
166                                },
167                                {
168                                        name: "setContent_widget", // for #12348
169                                        setUp: function(t){
170                                                // declare a widget whose template contains a non-templated widget
171                                                MyWidget = declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
172                                                        templateString: '<div><div '
173                                                                + 'data-dojo-type="dijit/layout/StackContainer"></div></div>'
174                                                });
175                                        },
176                                        runTest: function(t){
177                                                var w = new MyWidget(), dfd = new doh.Deferred();
178                                                pane2.set("content", w).then(function(){
179                                                                dfd.callback(true);
180                                                        }, function(e){
181                                                                dfd.errback(e);
182                                                });
183                                                return dfd;
184                                        }
185                                }
186                        ]);
187
188                        // Tests for doLayout parameter.
189                        // When this parameter is true, the single ContentPane child is resized
190                        // to match the size of the ContentPane.
191                        // See also ContentPaneLayout.html.
192                        var pane5;
193                        doh.registerGroup("doLayout", [
194                                {
195                                        name: "simple",
196                                        setUp: function(t){
197                                                pane5 = new ContentPane({
198                                                        content:"<div data-dojo-type='dijit/layout/StackContainer'></div>"
199                                                }).placeAt(document.body);
200                                                pane5.startup();
201                                        },
202                                        runTest: function(t){
203                                                // since there's just a single child it should be marked
204                                                // for layout/resize along w/the ContentPane
205                                                doh.t(pane5._singleChild);
206                                        },
207                                        tearDown: function(t){
208                                                pane5.destroyRecursive();
209                                        }
210                                },
211                                {
212                                        name: "doLayout=false",
213                                        setUp: function(t){
214                                                pane5 = new ContentPane({
215                                                        content:
216                                                                "<div data-dojo-type='dijit/layout/StackContainer'></div>",
217                                                        doLayout: false
218                                                }).placeAt(document.body);
219                                                pane5.startup();
220                                        },
221                                        runTest: function(t){
222                                                // since doLayout=false shouldn't try to resize child
223                                                doh.f(pane5._singleChild);
224                                        },
225                                        tearDown: function(t){
226                                                pane5.destroyRecursive();
227                                        }
228                                },
229                                {
230                                        name: "mixed content",
231                                        setUp: function(t){
232                                                pane5 = new ContentPane({
233                                                        content:
234                                                                "<span>hello world</span>" +
235                                                                "<div data-dojo-type='dijit/layout/StackContainer'></div>"
236                                                }).placeAt(document.body);
237                                                pane5.startup();
238                                        },
239                                        runTest: function(t){
240                                                // since there's plain HTML along with the widget, ContentPane shouldn't try to adjust
241                                                // this size of the widget (since that would cover up the other HTML)
242                                                doh.f(pane5._singleChild);
243                                        },
244                                        tearDown: function(t){
245                                                pane5.destroyRecursive();
246                                        }
247                                },
248                                {
249                                        name: "two widgets",
250                                        setUp: function(t){
251                                                pane5 = new ContentPane({
252                                                        content:
253                                                                "<div data-dojo-type='dijit/layout/StackContainer'></div>" +
254                                                                "<div data-dojo-type='dijit/layout/StackContainer'></div>"
255                                                }).placeAt(document.body);
256                                                pane5.startup();
257                                        },
258                                        runTest: function(t){
259                                                // since there are multiple children, neither should be marked
260                                                // for layout/resize along w/the ContentPane
261                                                doh.f(pane5._singleChild);
262                                        },
263                                        tearDown: function(t){
264                                                pane5.destroyRecursive();
265                                        }
266                                },
267                                {
268                                        name: "dojo.data",
269                                        setUp: function(t){
270                                                pane5 = new ContentPane({
271                                                        content:
272                                                                "<div data-dojo-type='dojo/data/ItemFileReadStore' data-dojo-id='dd'></div>" +
273                                                                "<div data-dojo-type='dijit/layout/StackContainer' id='sc'></div>"
274                                                }).placeAt(document.body);
275                                                pane5.startup();
276                                        },
277                                        runTest: function(t){
278                                                // there are two children but one is invisible, so the other should be marked
279                                                // for layout/resize along w/the ContentPane
280                                                doh.t(dd, "dd exists");
281                                                doh.t(registry.byId("sc"), "sc exists");
282                                                doh.is(registry.byId("sc"), pane5._singleChild, "pane5._singleChild");
283                                        },
284                                        tearDown: function(t){
285                                                pane5.destroyRecursive();
286                                        }
287                                },
288                                {
289                                        name: "non-visual tags ignored",
290                                        setUp: function(t){
291                                                pane5 = new ContentPane({
292                                                        content:
293                                                                "<scri" + "pt></scri" + "pt>" +
294                                                                "<link rel='stylesheet' href='../../themes/claro/claro.css'>" +
295                                                                "<style>body { background: red; }</style>" +
296                                                                "<div data-dojo-type='dijit/layout/StackContainer' id='sc'></div>"
297                                                }).placeAt(document.body);
298                                                pane5.startup();
299                                        },
300                                        runTest: function(t){
301                                                // <script> etc. tags should be ignored, <div> should be detected as single child
302                                                doh.t(pane5._singleChild, "script,link,style tags ignored, marked as single child");
303                                        },
304                                        tearDown: function(t){
305                                                pane5.destroyRecursive();
306                                        }
307                                }
308                        ]);
309
310                        declare("TestContained", _LayoutWidget, {
311                                startup: function(){
312                                        this.inherited(arguments);
313                                        this._started = true;
314                                },
315                                resize: function(){
316                                        this.inherited(arguments);
317                                        this._resized = true;
318                                }
319                        });
320
321                        var container;
322                        doh.register("ContentPane as _Container-like widget", [
323                                {
324                                        name: "creation",
325                                        runTest: function(t){
326                                                container = new ContentPane();
327                                                container.placeAt(document.body, "last");
328                                                container.startup();
329                                                t.is(0, container.getChildren().length, "number of children before set('content', ...)");
330                                                container.set('content',
331                                                        '<span>plain non-widget content</span>' +
332                                                        '<div><span>' +
333                                                                '<div id="zero" data-dojo-type="TestContained"></div>' +
334                                                                '<div id="one" data-dojo-type="TestContained"></div>' +
335                                                        '</span></div>' +
336                                                        '<div id="two" data-dojo-type="TestContained"></div>' +
337                                                        '<div id="three" data-dojo-type="dijit/_WidgetBase"></div>'
338                                                );
339
340                                                // Since ContentPane is a container it should call startup
341                                                // on it's children
342                                                t.t(registry.byId('two')._started, "started");
343
344                                                // Also, Layout widgets expect resize() to be
345                                                // called by their parent
346                                                t.t(registry.byId('two')._resized, "resized");
347                                        }
348                                },
349                                {
350                                        name: "getChildren",
351                                        runTest: function(t){
352                                                var children = container.getChildren();
353                                                t.is(4, children.length, "number of children");
354                                                t.is("zero", children[0].id);
355                                                t.is("one", children[1].id);
356                                                t.is("two", children[2].id);
357                                                t.is("three", children[3].id);
358                                        }
359                                },
360
361                                {
362                                        name: "deferred resize",
363                                        runTest: function(t){
364                                                // This tests that startup isn't called on the child widgets
365                                                // until the contentpane is made visible
366
367                                                var hiddenCP = new ContentPane({style: {display: "none"}});
368                                                hiddenCP.placeAt(document.body, "last");
369                                                hiddenCP.startup();
370
371                                                t.is(0, hiddenCP.getChildren().length, "number of children before set('content', ...)");
372                                                hiddenCP.set('content',
373                                                        '<span>plain non-widget content</span>' +
374                                                        '<div><span>' +
375                                                                '<div id="deferredZero" data-dojo-type="TestContained"></div>' +
376                                                                '<div id="deferredOne" data-dojo-type="TestContained"></div>' +
377                                                        '</span></div>' +
378                                                        '<div id="deferredTwo" data-dojo-type="TestContained"></div>' +
379                                                        '<div id="deferredThree" data-dojo-type="dijit/_WidgetBase"></div>'
380                                                );
381
382                                                t.f(registry.byId('deferredTwo')._resized, "not resized yet");
383
384                                                hiddenCP.set("style", {display: "block"});
385                                                hiddenCP._onShow();
386
387                                                t.t(registry.byId('deferredTwo')._resized, "resized");
388                                        }
389                                }
390
391/***
392                                ,
393                                {
394                                        name: "addChild",
395                                        runTest: function(t){
396                                                var afterTwo = new TestContained({id: "twoPointFive"});
397                                                container.addChild(afterTwo, 3);
398
399                                                // Make sure child was added and is in order
400                                                var children = container.getChildren();
401                                                t.is(5, children.length);
402                                                t.is("zero", children[0].id);
403                                                t.is("one", children[1].id);
404                                                t.is("two", children[2].id);
405                                                t.is("twoPointFive", children[3].id);
406                                                t.is("three", children[4].id);
407
408                                                // Since ContentPane is a container it should call startup
409                                                // on it's children
410                                                t.t(afterTwo._started, "started");
411
412                                                // Also, Layout widgets expect resize() to be
413                                                // called by their parent
414                                                t.t(afterTwo._resized, "resized");
415                                        }
416                                },
417                                {
418                                        name: "removeChild",
419                                        runTest: function(t){
420                                                var children = container.getChildren();
421                                                t.is(5, children.length);
422                                                container.removeChild(registry.byId("zero"));
423                                                container.removeChild(1); // should remove "two" - because zero is already removed
424                                                children = container.getChildren();
425                                                t.is(3, children.length);
426                                                t.is("one", children[0].id);
427                                                t.is("three", children[2].id);
428                                        }
429                                }
430****/
431                        ]);
432
433                        // Test that popup widgets in a ContentPane are created and deleted correctly
434                        doh.register("popup test", [
435                                function create(){
436                                        parser.parse(dom.byId("popupTest"));
437                                        doh.t(registry.byId("popupPane"), "popup ContentPane created");
438                                        doh.t(registry.byId("dialog"), "dialog created");
439                                        doh.is(document.body, registry.byId("dialog").domNode.parentNode, "dialog child of <body>");
440                                },
441                                function destroy(){
442                                        registry.byId("popupPane").destroyRecursive();
443                                        doh.f(registry.byId("popupPane"), "popup ContentPane destroyed");
444                                        doh.f(registry.byId("dialog"), "dialog widget destroyed");
445                                        doh.f(dom.byId("dialog"), "dialog DOMNode gone too");
446                                }
447                        ]);
448
449                        // Test that startup() on child widgets and plain JS objects is called at the correct time
450
451                        var nwStartupCalls = 0, nwDestroyCalls = 0;
452                        declare("NonWidget", null, {
453                                // summary:
454                                //              Doesn't extend _WidgetBase.  Used to test that startup() is still called.
455                                startup: function(){
456                                        if(!this._started){
457                                                nwStartupCalls++;
458                                                this._started = true;
459                                        }
460                                },
461                                destroyRecursive: function(){
462                                        nwDestroyCalls++;
463                                }
464                        });
465
466                        doh.register("startup", [
467                                function startupAfter(){
468                                        var cp1 = new ContentPane({
469                                                content: "<div id='startup-c1' data-dojo-type='TestContained'></div>"
470                                        }).placeAt(document.body);
471
472                                        var child = registry.byId("startup-c1");
473                                        doh.t(child, "child widget created");
474                                        doh.f(child._started, "child widget not started yet");
475
476                                        cp1.startup();
477
478                                        doh.t(child._started, "starting ContentPane starts child widget");
479                                },
480                                function startupBefore(){
481                                        var cp2 = new ContentPane({}).placeAt(document.body);
482                                        cp2.startup();
483
484                                        cp2.set("content", "<div id='startup-c2' data-dojo-type='TestContained'></div>");
485                                        var child = registry.byId("startup-c2");
486                                        doh.t(child, "child widget created");
487                                        doh.t(child._started, "child widget started");
488                                }
489                        ]);
490
491                        // Tests for when ContentPane contains objects not descended from _WidgetBase,
492                        // like dojo.Dnd.Source
493                        doh.register("non widget", [
494                                function startupAndDestroy(){
495                                        // even non-widgets inside of ContentPane (like dojo.dnd.Source) should have
496                                        // startup called on them
497                                        parser.parse(dom.byId("nonWidgetTest"));
498                                        doh.is(1, nwStartupCalls, "startup() on non-widgets called on parse");
499
500                                        nwp.set("content", "<div><div data-dojo-type='NonWidget' data-dojo-id='nw2'></div></div>");
501                                        doh.is(2, nwStartupCalls, "startup() called on non-widgets via set(content, ...)");
502                                        doh.is(1, nwDestroyCalls, "resetting the ContentPane content destroyed the old non-widget content");
503
504                                        // And also check that destroying ContentPane destroys the non-widget
505                                        nwp.destroyRecursive();
506                                        doh.is(2, nwDestroyCalls, "destroying ContentPane destroyed NonWidget content");
507                                }
508                        ]);
509
510                        doh.run();
511                });
512        </script>
513</head>
514<body class="claro" role="main">
515        <h2>dijit/layout/ContentPane DOH test</h2>
516        <h3>Test designed to run on localhost (minimize impact from network latency)</h3>
517
518        <h4>This should NOT be parsed automatically</h4>
519        <div id="pane1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='"class":"box"'>
520                <div data-dojo-type='TestWidget'>If this has a different background and a red border, the page parsed when it shouldn't</div>
521        </div>
522        <br/><h3>Testing ContentPane</h3>
523        <div id='pane2' class='box'>
524                Even though the entire page isn't scanned for widgets,
525                any sub widgets of a ContentPane will be created when a ContentPane is created<br/>
526                <span id="2_zero" data-dojo-type='TestWidget'>This should have a backgroundcolor and a border</span>
527                <div id="2_one" data-dojo-type="dijit/_WidgetBase"></div>
528                <div id="2_two" data-dojo-type="dijit/_WidgetBase"></div>
529                <div id="2_three" data-dojo-type="dijit/_WidgetBase"></div>
530        </div>
531        <br/><br/>
532
533        <!-- for container tests -->
534        <div id="container" data-dojo-type="dijit/layout/ContentPane">
535                <div id="zero" data-dojo-type="TestContained"></div>
536                <div id="one" data-dojo-type="TestContained"></div>
537                <div id="two" data-dojo-type="TestContained"></div>
538                <div id="three" data-dojo-type="dijit/_WidgetBase"></div>
539        </div>
540        <div id="outside" data-dojo-type="dijit/_WidgetBase"></div>
541        <div id="outsideCont" data-dojo-type="TestContained"></div>
542
543        <!-- for testing popup widgets inside of a content pane -->
544        <div id="popupTest">
545                <div id="popupPane" data-dojo-type="dijit/layout/ContentPane">
546                        <div id="dialog" data-dojo-type="dijit/Dialog">
547                                hello world
548                        </div>
549                </div>
550        </div>
551
552        <!-- for testing non-widgets inside of a content pane -->
553        <div id="nonWidgetTest">
554                <div id="nonWidgetPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-id="nwp">
555                        <div data-dojo-type="NonWidget" data-dojo-id="nw1"></div>
556                </div>
557        </div>
558
559</body>
560</html>
Note: See TracBrowser for help on using the repository browser.