source: Dev/trunk/src/client/dijit/tests/layout/LayoutContainer.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: 7.9 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html lang="en">
3<head>
4        <title>dijit/layout/LayoutContainer Test</title>
5
6        <script src="../boilerplate.js"></script>
7
8        <script type="text/javascript">
9                require([
10                        "doh/runner",
11                        "dojo/_base/array",
12                        "dojo/dom-geometry",
13                        "dojo/json",
14                        "dojo/parser",
15                        "dijit/registry",
16                        "dijit/layout/ContentPane",
17                        "dijit/layout/LayoutContainer",
18                        "dijit/tests/helpers",
19                        "dijit/form/FilteringSelect",
20                        "dojo/domReady!"
21                ], function(doh, array,domGeom, json, parser,
22                                        registry, ContentPane, LayoutContainer, helpers){
23
24                        function checkInside(/*Widget*/ child, /*Widget*/ parent){
25                                // summary:
26                                //              Test that child is fully inside of parent
27                                var cp = domGeom.position(child.domNode, true),
28                                        pp = domGeom.position(parent.domNode, true);
29
30                                doh.t(
31                                        cp.y > pp.y && cp.y+cp.h < pp.y+pp.h &&
32                                        cp.x > pp.x && cp.x+cp.w < pp.x+pp.w,
33                                        "check " + child.id + "( " + json.stringify(cp) + " ) inside " + parent.id  + "( " +
34                                                        json.stringify(pp) + " )");
35                        }
36                        function checkAbove(/*Widget*/ above, /*Widget*/ below){
37                                // summary:
38                                //              Test that "above" widget is above "below" widget
39
40                                var ap = domGeom.position(above.domNode, true),
41                                        bp = domGeom.position(below.domNode, true);
42
43                                doh.t(Math.round(ap.y+ap.h) <= Math.round(bp.y),
44                                        "check " + above.id + "( " + json.stringify(ap) + " ) above " + below.id + "( " +
45                                                        json.stringify(bp) + " )");
46                        }
47                        function checkLeft(/*Widget*/ left, /*Widget*/ right){
48                                // summary:
49                                //              Test that "left" widget is to left of "right" widget
50
51                                var lp = domGeom.position(left.domNode, true),
52                                        rp = domGeom.position(right.domNode, true);
53
54                                doh.t(lp.x+lp.w <= rp.x,
55                                        "check " + left.id + "( " + json.stringify(lp) + " ) to left of " + right.id + "( " +
56                                                        json.stringify(rp) + " )");
57                        }
58
59                        doh.register("parse", function(){
60                                return parser.parse();
61                        });
62
63                        doh.register("LayoutContainer", [
64                                function basic(){
65                                        var lc = registry.byId("basic");
66                                        array.forEach(lc.getChildren(), function(child){
67                                                checkInside(child, lc);
68                                        });
69
70                                        var left = registry.byId("leftcp_layout1"),
71                                                top = registry.byId("topcp_layout1"),
72                                                right = registry.byId("rightcp_layout1"),
73                                                center = registry.byId("centercp_layout1"),
74                                                bottom = registry.byId("bottomcp_layout1");
75
76                                        // Check positions
77                                        checkLeft(left, top);
78                                        checkLeft(left, center);
79                                        checkLeft(bottom, right);
80                                        checkAbove(top, center);
81                                        checkAbove(center, bottom);
82
83                                        // Check tab order
84                                        var tabbable = helpers.tabOrder(lc.domNode);
85                                        doh.is(7, tabbable.length, "each pane plus link and select");
86                                        doh.is(left.id, tabbable[0].id, "left");
87                                        doh.is(right.id, tabbable[1].id, "right");
88                                        doh.is(top.id, tabbable[2].id, "top");
89                                        doh.is(center.id, tabbable[3].id, "center");
90                                        doh.is(bottom.id, tabbable[6].id, "bottom");
91                                },
92
93                                function advanced(){
94                                        var lc = registry.byId("advanced");
95                                        array.forEach(lc.getChildren(), function(child){
96                                                checkInside(child, lc);
97                                        });
98
99                                        var left = registry.byId("leftcp_layout2"),
100                                                top = registry.byId("topcp_layout2"),
101                                                right = registry.byId("rightcp_layout2"),
102                                                centerLeft = registry.byId("centerLeftcp_layout2"),
103                                                center = registry.byId("centercp_layout2"),
104                                                centerRight = registry.byId("centerRightcp_layout2"),
105                                                bottom = registry.byId("bottomcp_layout2");
106
107                                        // Check positions
108                                        checkLeft(left, top);
109                                        checkLeft(left, centerLeft);
110                                        checkLeft(centerLeft, center);
111                                        checkLeft(center, centerRight);
112                                        checkAbove(top, center);
113                                        checkAbove(top, centerRight);
114                                        checkAbove(centerLeft, bottom);
115
116                                        // Check tab order
117                                        var tabbable = helpers.tabOrder(lc.domNode);
118                                        doh.is(8, tabbable.length, "each pane plus link and select");
119                                        doh.is(left.id, tabbable[0].id, "left");
120                                        doh.is(top.id, tabbable[1].id, "top");
121                                        doh.is(centerLeft.id, tabbable[2].id, "inner left");
122                                        doh.is(center.id, tabbable[3].id, "center");
123                                        /* two random widgets inside center pane ... */
124                                        doh.is(centerRight.id, tabbable[6].id, "inner right");
125                                        doh.is(bottom.id, tabbable[7].id, "bottom");
126                                }
127                        ]);
128                       
129                        doh.run();
130                });
131        </script>
132
133</head>
134<body class="claro" role="main">
135        <h2 id="heading" >Dijit layout.LayoutContainer tests</h2>
136
137        <p>Basic layout. Tabindex=&quot;0&quot; added to each pane to test for tab order matching source code order.  Tab order
138        should be:  left, right, top, middle/main, bottom</p>
139
140        <div id="basic" data-dojo-type="dijit/layout/LayoutContainer" data-dojo-props="design: 'sidebar'"
141                style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
142        >
143                <div data-dojo-type="dijit/layout/ContentPane" id="leftcp_layout1" region="left" style="background-color: #acb386; width: 100px;" tabindex="0">
144                        left
145                </div>
146                <div data-dojo-type="dijit/layout/ContentPane" id="rightcp_layout1" region="right" style="background-color: #acb386;"  tabindex="0">
147                        right
148                </div>
149                <div data-dojo-type="dijit/layout/ContentPane" id="topcp_layout1" region="top" style="background-color: #b39b86; "  tabindex="0">
150                        top bar
151                </div>
152                <div data-dojo-type="dijit/layout/ContentPane" id="centercp_layout1" region="center" style="background-color: #f5ffbf; padding: 10px;"  tabindex="0">
153                        main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
154                        (to check we're copying children around properly).<br />
155                        <select data-dojo-type="dijit/form/FilteringSelect" aria-label="select">
156                                <option value="1">foo</option>
157                                <option value="2">bar</option>
158                                <option value="3">baz</option>
159                        </select>
160                        Here's some text that comes AFTER the combo box.
161                </div>
162
163                <div data-dojo-type="dijit/layout/ContentPane" id="bottomcp_layout1" region="bottom" style="background-color: #b39b86;"  tabindex="0">
164                        bottom bar
165                </div>
166
167        </div>
168
169        <p>Advanced layout. Tabindex=&quot;0&quot; added to each pane to test for tab order matching source code order.  Tab order
170        should be:  left, top, inner left, inner middle, inner right, bottom. This is not an ideal tab order. See below to use nested
171        layout containers to achieve a tab order which matches presentation and source code order.</p>
172        <div id="advanced" data-dojo-type="dijit/layout/LayoutContainer"
173                style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
174        >
175                <div data-dojo-type="dijit/layout/ContentPane" id="leftcp_layout2" data-dojo-props="region:'left',layoutPriority:1"
176                         style="background-color: #acb386; width: 100px; margin: 5px;" tabindex="0">
177                        left
178                </div>
179                <div data-dojo-type="dijit/layout/ContentPane" id="topcp_layout2" data-dojo-props="region:'top',layoutPriority:2"
180                         style="background-color: #b39b86;  margin: 5px;" tabindex="0">
181                        top bar
182                </div>
183                <div data-dojo-type="dijit/layout/ContentPane" id="centerLeftcp_layout2" data-dojo-props="region:'left',layoutPriority:3"
184                         style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
185                        inner left
186                </div>
187
188                <div data-dojo-type="dijit/layout/ContentPane" id="centercp_layout2" data-dojo-props="region:'center'"
189                         style="background-color: #f5ffbf; padding: 10px; margin: 5px;" tabindex="0">
190                        main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
191
192                        (to check we're copying children around properly).<br />
193                        <select data-dojo-type="dijit/form/FilteringSelect" aria-label="select">
194                                <option value="1">foo</option>
195                                <option value="2">bar</option>
196                                <option value="3">baz</option>
197                        </select>
198                        Here's some text that comes AFTER the combo box.
199                </div>
200                <div data-dojo-type="dijit/layout/ContentPane" id="centerRightcp_layout2" data-dojo-props="region:'right',layoutPriority:3"
201                         style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
202                        inner right
203                </div>
204                <div data-dojo-type="dijit/layout/ContentPane" id="bottomcp_layout2" data-dojo-props="region:'bottom',layoutPriority:2"
205                         style="background-color: #b39b86; margin: 5px;" tabindex="0">
206
207                        bottom bar
208                </div>
209        </div>
210</body>
211</html>
Note: See TracBrowser for help on using the repository browser.