1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
2 | "http://www.w3.org/TR/html4/strict.dtd">
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | <html>
|
8 | <head>
|
9 | <title>testing Core HTML/DOM/CSS/Style utils</title>
|
10 | <style type="text/css">
|
11 | @import "../../resources/dojo.css";
|
12 | </style>
|
13 | <script type="text/javascript" src="../../dojo.js" data-dojo-config="isDebug:true"></script>
|
14 | <script type="text/javascript">
|
15 | require(["dojo", "doh", "dojo/sniff", "dojo/domReady!"], function(dojo, doh, has){
|
16 |
|
17 | function getIframeDocument(iframeNode){
|
18 |
|
19 | var doc = iframeNode.contentDocument ||
|
20 | (
|
21 | (iframeNode.contentWindow)&&(iframeNode.contentWindow.document)
|
22 | ) ||
|
23 | (
|
24 | (iframeNode.name)&&(document.frames[iframeNode.name])&&
|
25 | (documendoh.frames[iframeNode.name].document)
|
26 | ) || null;
|
27 | return doc;
|
28 | }
|
29 |
|
30 |
|
31 | var iframe_div = dojo.byId('iframe_div');
|
32 | dojo.addOnWindowUnload(function(){
|
33 | iframe_div.innerHTML = 'unloading';
|
34 | });
|
35 | setTimeout(function(){
|
36 | iframe_div.innerHTML = '<iframe src="absStrictIframe.html" name="iframe_strict" id="iframe_strict" \
|
37 | style="border:3px solid black; padding:4px; margin:5px; background-color:black;" \
|
38 | scrolling=yes allowtransparency=true></iframe>\
|
39 | <iframe src="absQuirksIframe.html" name="iframe_quirks" id="iframe_quirks" \
|
40 | style="border:3px solid black; padding:4px; margin:5px; background-color:black;" \
|
41 | scrolling=yes allowtransparency=true></iframe>'; //'balanced
|
42 | }, 0);
|
43 |
|
44 | doh.register("t",
|
45 | [
|
46 | "doh.is(100, dojo.marginBox('sq100').w);",
|
47 | "doh.is(100, dojo.marginBox('sq100').h);",
|
48 | "doh.is(100, dojo._getMarginSize('sq100').w);",
|
49 | "doh.is(100, dojo._getMarginSize('sq100').h);",
|
50 |
|
51 | "doh.is(120, dojo.marginBox('sq100margin10').w);",
|
52 | "doh.is(120, dojo.marginBox('sq100margin10').h);",
|
53 | "doh.is(100, dojo.contentBox('sq100margin10').w);",
|
54 | "doh.is(100, dojo.contentBox('sq100margin10').h);",
|
55 |
|
56 | "doh.is(140, dojo.marginBox('sq100margin10pad10').w);",
|
57 | "doh.is(140, dojo.marginBox('sq100margin10pad10').h);",
|
58 | "doh.is(140, dojo._getMarginSize('sq100margin10pad10').w);",
|
59 | "doh.is(140, dojo._getMarginSize('sq100margin10pad10').h);",
|
60 |
|
61 | "doh.is(120, dojo.marginBox('sq100pad10').w);",
|
62 | "doh.is(120, dojo.marginBox('sq100pad10').h);",
|
63 |
|
64 | "doh.is(110, dojo.marginBox('sq100ltpad10').w);",
|
65 | "doh.is(110, dojo.marginBox('sq100ltpad10').h);",
|
66 | "doh.is(100, dojo.contentBox('sq100ltpad10').w);",
|
67 | "doh.is(100, dojo.contentBox('sq100ltpad10').h);",
|
68 |
|
69 | "doh.is(120, dojo.marginBox('sq100ltpad10rbmargin10').w);",
|
70 | "doh.is(120, dojo.marginBox('sq100ltpad10rbmargin10').h);",
|
71 |
|
72 | "doh.is(120, dojo.marginBox('sq100border10').w);",
|
73 | "doh.is(120, dojo.marginBox('sq100border10').h);",
|
74 | "doh.is(100, dojo.contentBox('sq100border10').w);",
|
75 | "doh.is(100, dojo.contentBox('sq100border10').h);",
|
76 |
|
77 | "doh.is(140, dojo.marginBox('sq100border10margin10').w);",
|
78 | "doh.is(140, dojo.marginBox('sq100border10margin10').h);",
|
79 | "doh.is(100, dojo.contentBox('sq100border10margin10').w);",
|
80 | "doh.is(100, dojo.contentBox('sq100border10margin10').h);",
|
81 |
|
82 | "doh.is(160, dojo.marginBox('sq100border10margin10pad10').w);",
|
83 | "doh.is(160, dojo.marginBox('sq100border10margin10pad10').h);",
|
84 | "doh.is(100, dojo.contentBox('sq100border10margin10pad10').w);",
|
85 | "doh.is(100, dojo.contentBox('sq100border10margin10pad10').h);",
|
86 |
|
87 |
|
88 |
|
89 | "doh.is(100, dojo.marginBox('sq100nopos').h);",
|
90 |
|
91 | "doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).l);",
|
92 | "doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).t);",
|
93 | "doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).w);",
|
94 | "doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).h);",
|
95 |
|
96 | "doh.is(0, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).l);",
|
97 | "doh.is(0, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).t);",
|
98 | "doh.is(10, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).w);",
|
99 | "doh.is(10, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).h);",
|
100 |
|
101 | "doh.is(10, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).l);",
|
102 | "doh.is(10, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).t);",
|
103 | "doh.is(20, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).w);",
|
104 | "doh.is(20, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).h);",
|
105 |
|
106 | "doh.is(20, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).l);",
|
107 | "doh.is(20, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).t);",
|
108 | "doh.is(40, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).w);",
|
109 | "doh.is(40, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).h);",
|
110 |
|
111 | function scrollUp(){
|
112 | scrollTo(0, 0);
|
113 | },
|
114 |
|
115 | function coordsBasic(t){
|
116 | var pos = dojo.position("sq100", false);
|
117 |
|
118 | doh.is(100, pos.x);
|
119 | doh.is(100, pos.y);
|
120 | doh.is(100, pos.w);
|
121 | doh.is(100, pos.h);
|
122 | },
|
123 | function coordsMargin(t){
|
124 |
|
125 | var pos = dojo.position("sq100margin10", false);
|
126 | doh.is(260, pos.x);
|
127 | doh.is(110, pos.y);
|
128 | doh.is(100, pos.w);
|
129 | doh.is(100, pos.h);
|
130 | pos = dojo.marginBox("sq100margin10");
|
131 | doh.is(120, pos.w);
|
132 | doh.is(120, pos.h);
|
133 |
|
134 |
|
135 | pos = dojo.coords("sq100margin10", false);
|
136 | doh.is(260, pos.x);
|
137 | doh.is(110, pos.y);
|
138 | doh.is(120, pos.w);
|
139 | doh.is(120, pos.h);
|
140 | },
|
141 | function coordsBorder(t){
|
142 | var pos = dojo.position("sq100border10", false);
|
143 | doh.is(100, pos.x);
|
144 | doh.is(400, pos.y);
|
145 | },
|
146 | function sq100nopos(t){
|
147 | var pos = dojo.position("sq100nopos", false);
|
148 |
|
149 | doh.is(0, pos.x);
|
150 | doh.t(pos.y > 0);
|
151 |
|
152 |
|
153 | doh.is(100, pos.h);
|
154 | },
|
155 | function coordsScrolled(t) {
|
156 | var s = document.createElement('div');
|
157 | var c = document.createElement('div');
|
158 | document.body.appendChild(s);
|
159 | s.appendChild(c);
|
160 | var x=257, y= 285;
|
161 | with (s.style) {
|
162 | position = 'absolute';
|
163 | overflow = 'scroll';
|
164 | border = "10px solid black";
|
165 | }
|
166 | dojo.marginBox(s, {l: x, t: y, w: 100, h: 100});
|
167 | dojo.marginBox(c, {l: 0, t: 0, w: 500, h: 500});
|
168 | s.scrollTop = 200;
|
169 | var pos = dojo.position(s, true);
|
170 | doh.is(x, pos.x);
|
171 | doh.is(y, pos.y);
|
172 | },
|
173 | {
|
174 | name: "coordsIframe",
|
175 | timeout: 2000,
|
176 | runTest: function(){
|
177 | var def = new doh.Deferred();
|
178 | setTimeout(function(){ try{
|
179 | var oldLtr = dojo._isBodyLtr();
|
180 | var oldQuirks = has("quirks");
|
181 | dojo.withGlobal(dojo.byId('iframe_quirks').win, function(){
|
182 | doh.t(has("quirks"), "has('quirks') == true in quirks/iframe");
|
183 | doh.f(dojo._isBodyLtr(), "isBodyLtr == false in RTL/iframe");
|
184 | var pos = dojo.position('iframe_00_quirks');
|
185 | doh.t(pos.x===0, "quirks iframe element x == 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")");
|
186 | doh.t(pos.y===0, "quirks iframe element y == 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")");
|
187 | doh.t(pos.w>0, "quirks iframe element w > 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")");
|
188 | doh.t(pos.h>0, "quirks iframe element h > 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")");
|
189 | });
|
190 | dojo.withGlobal(dojo.byId('iframe_strict').win, function(){
|
191 | doh.f(has("quirks"), "has('quirks') == false in strict/ifraee");
|
192 | doh.f(dojo._isBodyLtr(), "isBodyLtr == false in RTL/iframe");
|
193 | var pos = dojo.position('iframe_00_strict');
|
194 | doh.t(pos.x===0, "strict iframe element x == 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")");
|
195 | doh.t(pos.y===0, "strict iframe element y == 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")");
|
196 | doh.t(pos.w>0, "strict iframe element w > 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")");
|
197 | doh.t(pos.h>0, "strict iframe element h > 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")");
|
198 | });
|
199 | doh.t(!oldLtr == !dojo._isBodyLtr(), "isBodyLtr restored after withGlobal");
|
200 | doh.is(oldQuirks, has("quirks"), "has('quirks') restored after withGlobal");
|
201 | def.callback(true);
|
202 | }catch(e){ def.errback(e); } }, 1000);
|
203 | return def;
|
204 | }
|
205 | },
|
206 | "doh.is(1, dojo.style('sq100nopos', 'opacity'));",
|
207 |
|
208 |
|
209 | "doh.is((0.1).toFixed(4), Number(dojo.style('sq100nopos', 'opacity', 0.1)).toFixed(4));",
|
210 | "doh.is((0.8).toFixed(4), Number(dojo.style('sq100nopos', 'opacity', 0.8)).toFixed(4));",
|
211 | function styleObject(){
|
212 | dojo.style('sq100nopos', { 'opacity': 0.1 });
|
213 | doh.is((0.1).toFixed(4), Number(dojo.style('sq100nopos', 'opacity')).toFixed(4));
|
214 | dojo.style('sq100nopos', { 'opacity': 0.8 });
|
215 | doh.is((0.8).toFixed(4), Number(dojo.style('sq100nopos', 'opacity')).toFixed(4));
|
216 | },
|
217 |
|
218 | "doh.is('static', dojo.style('sq100nopos', 'position'));",
|
219 | function getBgcolor(t){
|
220 | var bgc = dojo.style('sq100nopos', 'backgroundColor');
|
221 | doh.t((bgc == "rgb(0, 0, 0)")||(bgc == "black")||(bgc == "#000000"));
|
222 | },
|
223 | function testClassFunctions(t){
|
224 | var node = dojo.byId("sq100");
|
225 | dojo.removeClass(node);
|
226 | dojo.addClass(node, "a");
|
227 | doh.is("a", node.className, "class is a");
|
228 | dojo.removeClass(node, "c");
|
229 | doh.is("a", node.className, "class is still a");
|
230 | t.assertTrue(dojo.hasClass(node, "a"), "class is a, test for a");
|
231 | t.assertFalse(dojo.hasClass(node, "b"), "class is a, test for b");
|
232 | dojo.addClass(node, "b");
|
233 | doh.is("a b", node.className, "class is a b");
|
234 | t.assertTrue(dojo.hasClass(node, "a"), "class is a b, test for a");
|
235 | t.assertTrue(dojo.hasClass(node, "b"), "class is a b, test for b");
|
236 | dojo.removeClass(node, "a");
|
237 | doh.is("b", node.className, "class is b");
|
238 | t.assertFalse(dojo.hasClass(node, "a"), "class is b, test for a");
|
239 | t.assertTrue(dojo.hasClass(node, "b"), "class is b, test for b");
|
240 | dojo.toggleClass(node, "a");
|
241 | doh.is("b a", node.className, "class is b a");
|
242 | t.assertTrue(dojo.hasClass(node, "a"), "class is b a, test for a");
|
243 | t.assertTrue(dojo.hasClass(node, "b"), "class is b a, test for b");
|
244 | dojo.toggleClass(node, "a");
|
245 | doh.is("b", node.className, "class is b (again)");
|
246 | t.assertFalse(dojo.hasClass(node, "a"), "class is b (again), test for a");
|
247 | t.assertTrue(dojo.hasClass(node, "b"), "class is b (again), test for b");
|
248 | dojo.toggleClass(node, "b");
|
249 | doh.is("", node.className, "class is blank");
|
250 | t.assertFalse(dojo.hasClass(node, "a"), "class is blank, test for a");
|
251 | t.assertFalse(dojo.hasClass(node, "b"), "class is blank, test for b");
|
252 | dojo.removeClass(node, "c");
|
253 | t.assertTrue(!node.className, "no class");
|
254 | var acuWorked = true;
|
255 | try{
|
256 | dojo.addClass(node);
|
257 | }catch(e){
|
258 | acuWorked = false;
|
259 | }
|
260 | doh.is(true, acuWorked, "addClass handles undefined class");
|
261 | dojo.addClass(node, "a");
|
262 | dojo.replaceClass(node, "b", "a");
|
263 | t.assertTrue(dojo.hasClass(node, "b"), "class is b after replacing a, test for b");
|
264 | t.assertFalse(dojo.hasClass(node, "a"), "class is b after replacing a, test for not a");
|
265 |
|
266 | dojo.replaceClass(node, "", "b");
|
267 | t.assertFalse(dojo.hasClass(node, "b"), "class b should be removed, with no class added");
|
268 | t.is("", node.className, "The className is empty");
|
269 |
|
270 | dojo.addClass(node, "b a");
|
271 | dojo.replaceClass(node, "c", "");
|
272 | t.is("b a c", node.className,
|
273 | "The className is is 'b a c' after using an empty string in replaceClass");
|
274 |
|
275 | t.f(dojo.hasClass(document, "ab"), "hasClass on document should not throw error");
|
276 | },
|
277 | function testAddRemoveClassMultiple(t){
|
278 | var node = dojo.byId("sq100");
|
279 | dojo.removeClass(node);
|
280 | dojo.addClass(node, "a");
|
281 | t.is("a", node.className, "class is a");
|
282 | dojo.addClass(node, "a b");
|
283 | t.is("a b", node.className, "class is a b");
|
284 | dojo.addClass(node, "b a");
|
285 | t.is("a b", node.className, "class is still a b");
|
286 | dojo.addClass(node, ["a", "c"]);
|
287 | t.is("a b c", node.className, "class is a b c");
|
288 | dojo.removeClass(node, "c a");
|
289 | t.is("b", node.className, "class is b");
|
290 | dojo.removeClass(node);
|
291 | t.is("", node.className, "empty class");
|
292 | dojo.addClass(node, " c b a ");
|
293 | t.is("c b a", node.className, "class is c b a");
|
294 | dojo.removeClass(node, " c b ");
|
295 | t.is("a", node.className, "class is a");
|
296 | dojo.removeClass(node, ["a", "c"]);
|
297 | t.is("", node.className, "empty class");
|
298 | dojo.addClass(node, "a b");
|
299 | dojo.replaceClass(node, "c", "a b");
|
300 | t.is("c", node.className, "class is c");
|
301 | dojo.replaceClass(node, "");
|
302 | t.is("", node.className, "empty class");
|
303 | node.className = "";
|
304 | },
|
305 | function attrInnerHtmlDiv(t){
|
306 | var n = dojo.create("div", {
|
307 | innerHTML: "1<em>2</em>3"
|
308 | }, dojo.body());
|
309 | doh.is("1<em>2</em>3", n.innerHTML.toLowerCase());
|
310 | dojo.destroy(n);
|
311 | },
|
312 | function attrInnerHtmlTable(t){
|
313 | var n = dojo.create("table", {
|
314 | innerHTML: "<thead><tr><th>1st!</th></tr></thead><tbody></tbody>"
|
315 | }, dojo.body());
|
316 | doh.is("<thead><tr><th>1st!</th></tr></thead><tbody></tbody>",
|
317 | n.innerHTML.toLowerCase().replace(/\s+/g, ""));
|
318 | dojo.destroy(n);
|
319 | },
|
320 | function attr_map(t) {
|
321 | var input = document.createElement("input");
|
322 | dojo.attr(input, {
|
323 | "class": "thinger blah",
|
324 | "tabIndex": 1,
|
325 | "type": "text"
|
326 | });
|
327 | doh.t(dojo.hasClass(input, "thinger"), "hasClass of thinger");
|
328 | doh.t(dojo.hasClass(input, "blah"), "hasClass of blah");
|
329 | },
|
330 | function attrSpecials() {
|
331 | var node = document.createElement("div");
|
332 | dojo.body().appendChild(node);
|
333 | dojo.attr(node, {
|
334 | style: {
|
335 | opacity: 0.5,
|
336 | width: "30px",
|
337 | border: "1px solid black"
|
338 | }
|
339 | });
|
340 | doh.is(0.5, dojo.style(node, "opacity"));
|
341 | doh.is(30, dojo.style(node, "width"));
|
342 | doh.is(1, dojo.style(node, "borderWidth"));
|
343 |
|
344 | },
|
345 | function testIframeDestroy10095(t) {
|
346 | var iframeWin = dojo.byId('10095_iframe').win;
|
347 | doh.t(!iframeWin.document.getElementById('10095_textbox'), "reloaded iframe element destroyed");
|
348 | },
|
349 | function testGCSsvg(t){
|
350 | var s = dojo.getComputedStyle(dojo.byId("rect1"));
|
351 | doh.t(typeof s != "undefined", "dojo.getComputedStyle succeeded on an svg shape");
|
352 | }
|
353 | ]
|
354 | );
|
355 |
|
356 | dojo.forEach(["None", "Vert", "Both"], function(scroll){
|
357 | dojo.forEach(["Quirks", "Strict"], function(doctype){
|
358 | var id = "scrolling" + doctype + "Iframe" + scroll;
|
359 | doh.register(id, {
|
360 | name: "test_" + id,
|
361 | timeout: 4000,
|
362 | runTest: function(t){
|
363 | var d = new doh.Deferred(),
|
364 | s = document.createElement('SPAN');
|
365 | s.loaded = function(iframe){
|
366 |
|
367 | iframe.resultReady = d.getTestCallback(function(){
|
368 | t.is('EQUAL', iframe.testResult);
|
369 | });
|
370 | iframe.runScrollingTest(iframe);
|
371 | };
|
372 | s.innerHTML = '<iframe class="iframeTest" id="' + id + '" src="scrolling' + doctype + 'Iframe.html?ltr&' + scroll + '&large" frameborder="0" onload="this.parentNode.loaded(this)" style="background-color:gray;" allowtransparency></iframe>';
|
373 | dojo.byId("iframeContainer").appendChild(s);
|
374 | return d;
|
375 | }
|
376 | });
|
377 | });
|
378 | });
|
379 |
|
380 | doh.register("t",
|
381 | [
|
382 | function emptySvg(t){
|
383 | dojo.empty(dojo.byId("surface"));
|
384 | doh.f(!!dojo.byId("surface").firstChild, "svg firstChild");
|
385 | },
|
386 | function destroySvg(t){
|
387 | dojo.destroy(dojo.byId("surface"));
|
388 | doh.f(!!dojo.byId("surface"), "svg byId");
|
389 | },
|
390 | function emptyObject(t){
|
391 | dojo.empty(dojo.byId("objectToEmpty"));
|
392 | doh.f(!!dojo.byId("objectToEmpty").firstChild, "object firstChild");
|
393 | },
|
394 | function destroyObject(t){
|
395 | dojo.destroy(dojo.byId("objectToEmpty"));
|
396 | doh.f(!!dojo.byId("objectToEmpty"), "object byId");
|
397 | },
|
398 | function destroyIframe(t){
|
399 | dojo.destroy(dojo.byId("iframeToDestroy"));
|
400 | doh.f(!!dojo.byId("iframeToDestroy"), "iframe byId");
|
401 | },
|
402 | function destroyDivNotInDOM(t){
|
403 | var p = dojo.byId("divToRemoveFromDOM");
|
404 | var n = dojo.byId("divToDestroy");
|
405 | p = p.parentNode.removeChild(p);
|
406 | doh.f(!!dojo.byId("divToRemoveFromDOM"), "div byId");
|
407 | doh.t(!!p.firstChild, "div child 1");
|
408 | doh.is(p.firstChild, n, "div 1st child");
|
409 | doh.isNot(p.firstChild, p.lastChild, "div 1st child");
|
410 | dojo.destroy(n);
|
411 | doh.t(!!p.firstChild, "div child 2");
|
412 | doh.isNot(p.firstChild, n, "div 2nd child");
|
413 | doh.is(p.firstChild, p.lastChild, "div 2nd child");
|
414 | dojo.empty(p);
|
415 | doh.f(!!p.firstChild, "div child 3");
|
416 | dojo.destroy(p);
|
417 | doh.t(true, "no exception thrown");
|
418 | }
|
419 | /*
|
420 |
|
421 |
|
422 | function emptyGrandchildren(){
|
423 | var parent = dojo.byId("emptyParent"),
|
424 | child = dojo.byId("emptyChild");
|
425 |
|
426 | dojo.empty("emptyParent");
|
427 |
|
428 | doh.f(!!parent.firstChild, "parent's children removed");
|
429 | doh.t(!!child.firstChild, "child's children remain");
|
430 | }
|
431 | */
|
432 | ]
|
433 | );
|
434 |
|
435 | doh.runOnLoad();
|
436 | });
|
437 | </script>
|
438 | <style type="text/css">
|
439 | html, body {
|
440 | padding: 0px;
|
441 | margin: 0px;
|
442 | border: 0px;
|
443 | }
|
444 |
|
445 | #sq100 {
|
446 | background-color: black;
|
447 | color: white;
|
448 | position: absolute;
|
449 | left: 100px;
|
450 | top: 100px;
|
451 | width: 100px;
|
452 | height: 100px;
|
453 | border: 0px;
|
454 | padding: 0px;
|
455 | margin: 0px;
|
456 | overflow: hidden;
|
457 | }
|
458 |
|
459 | #sq100margin10 {
|
460 | background-color: black;
|
461 | color: white;
|
462 | position: absolute;
|
463 | left: 250px;
|
464 | top: 100px;
|
465 | width: 100px;
|
466 | height: 100px;
|
467 | border: 0px;
|
468 | padding: 0px;
|
469 | margin: 10px;
|
470 | overflow: hidden;
|
471 | }
|
472 |
|
473 | #sq100margin10pad10 {
|
474 | background-color: black;
|
475 | color: white;
|
476 | position: absolute;
|
477 | left: 400px;
|
478 | top: 100px;
|
479 | width: 100px;
|
480 | height: 100px;
|
481 | border: 0px;
|
482 | padding: 10px;
|
483 | margin: 10px;
|
484 | overflow: hidden;
|
485 | }
|
486 |
|
487 | #sq100pad10 {
|
488 | background-color: black;
|
489 | color: white;
|
490 | position: absolute;
|
491 | left: 100px;
|
492 | top: 250px;
|
493 | width: 100px;
|
494 | height: 100px;
|
495 | border: 0px;
|
496 | padding: 10px;
|
497 | margin: 0px;
|
498 | overflow: hidden;
|
499 | }
|
500 |
|
501 | #sq100ltpad10 {
|
502 | background-color: black;
|
503 | color: white;
|
504 | position: absolute;
|
505 | left: 250px;
|
506 | top: 250px;
|
507 | width: 100px;
|
508 | height: 100px;
|
509 | border: 0px;
|
510 | padding-left: 10px;
|
511 | padding-top: 10px;
|
512 | padding-right: 0px;
|
513 | padding-bottom: 0px;
|
514 | margin: 0px;
|
515 | overflow: hidden;
|
516 | }
|
517 |
|
518 | #sq100ltpad10rbmargin10 {
|
519 | background-color: black;
|
520 | color: white;
|
521 | position: absolute;
|
522 | left: 400px;
|
523 | top: 250px;
|
524 | width: 100px;
|
525 | height: 100px;
|
526 | border: 0px;
|
527 | padding-left: 10px;
|
528 | padding-top: 10px;
|
529 | padding-right: 0px;
|
530 | padding-bottom: 0px;
|
531 | margin-left: 0px;
|
532 | margin-top: 0px;
|
533 | margin-right: 10px;
|
534 | margin-bottom: 10px;
|
535 | overflow: hidden;
|
536 | }
|
537 |
|
538 | #sq100border10 {
|
539 | background-color: black;
|
540 | color: white;
|
541 | position: absolute;
|
542 | left: 100px;
|
543 | top: 400px;
|
544 | width: 100px;
|
545 | height: 100px;
|
546 | border: 10px solid yellow;
|
547 | padding: 0px;
|
548 | margin: 0px;
|
549 | overflow: hidden;
|
550 | }
|
551 |
|
552 | #sq100border10margin10 {
|
553 | background-color: black;
|
554 | color: white;
|
555 | position: absolute;
|
556 | left: 250px;
|
557 | top: 400px;
|
558 | width: 100px;
|
559 | height: 100px;
|
560 | border: 10px solid yellow;
|
561 | padding: 0px;
|
562 | margin: 10px;
|
563 | overflow: hidden;
|
564 | }
|
565 |
|
566 | #sq100border10margin10pad10 {
|
567 | background-color: black;
|
568 | color: white;
|
569 | position: absolute;
|
570 | left: 400px;
|
571 | top: 400px;
|
572 | width: 100px;
|
573 | height: 100px;
|
574 | border: 10px solid yellow;
|
575 | padding: 10px;
|
576 | margin: 10px;
|
577 | overflow: hidden;
|
578 | }
|
579 |
|
580 | #sq100nopos {
|
581 | background-color: black;
|
582 | color: white;
|
583 | width: 100px;
|
584 | height: 100px;
|
585 | padding: 0px;
|
586 | margin: 0px;
|
587 | }
|
588 |
|
589 | #scrollingStrictIframe,
|
590 | #scrollingQuirksIframe {
|
591 | border: 10px solid black;
|
592 | }
|
593 | </style>
|
594 | </head>
|
595 | <body>
|
596 | <h1>testing Core HTML/DOM/CSS/Style utils</h1>
|
597 | <div id="sq100">
|
598 | 100px square, abs
|
599 | </div>
|
600 | <div id="sq100margin10">
|
601 | 100px square, abs, 10px margin
|
602 | </div>
|
603 | <div id="sq100margin10pad10">
|
604 | 100px square, abs, 10px margin, 10px padding
|
605 | </div>
|
606 | <div id="sq100pad10">
|
607 | 100px square, abs, 10px padding
|
608 | </div>
|
609 | <div id="sq100ltpad10">
|
610 | 100px square, abs, 10px left and top padding
|
611 | </div>
|
612 | <div id="sq100ltpad10rbmargin10">
|
613 | 100px square, abs, 10px left and top padding, 10px bottom and right margin
|
614 | </div>
|
615 | <div id="sq100border10">
|
616 | 100px square, abs, 10px yellow border
|
617 | </div>
|
618 | <div id="sq100border10margin10">
|
619 | 100px square, abs, 10px yellow border, 10px margin
|
620 | </div>
|
621 | <div id="sq100border10margin10pad10">
|
622 | 100px square, abs, 10px yellow border, 10px margin, 10px padding
|
623 | </div>
|
624 | <div id="sq100nopos">
|
625 | 100px square, no positioning
|
626 | </div>
|
627 |
|
628 | <iframe id="blah" name="blah" src="javascript:'<html><body><div id=subDiv></div></body></html>'"></iframe>
|
629 |
|
630 | <script type="text/javascript">
|
631 | var reloaded = false;
|
632 | function iframe10095loaded() {
|
633 | require(["dojo", "dojo/domReady!"], function(dojo) {
|
634 | var iframeWin = dojo.byId('10095_iframe').win;
|
635 | dojo.withGlobal(iframeWin, function(){ dojo.destroy(dojo.byId('10095_textbox')) });
|
636 | if(!reloaded){
|
637 | reloaded = true;
|
638 | dojo.byId('10095_iframe').src=iframeWin.frameElement.src;
|
639 | }
|
640 | });
|
641 | }
|
642 | </script>
|
643 | <iframe id="10095_iframe" style="display:none;" src="javascript:'<html><head><script>frameElement.win=window</script></head><body><input id=10095_textbox></body></html>'" onload="iframe10095loaded()"></iframe>
|
644 |
|
645 | <div id='iframe_div' style="position:absolute;top:0;left:500px;"></div>
|
646 |
|
647 | <div id="div-no-tabindex"></div>
|
648 | <div id="div-tabindex-minus-1" tabIndex="-1"></div>
|
649 | <div id="div-tabindex-0" tabIndex="0"></div>
|
650 | <div id="div-tabindex-1" tabIndex="1"></div>
|
651 |
|
652 | <div>
|
653 | <input id="input-no-type">
|
654 | <input id="input-with-type" type="checkbox">
|
655 | <input id="input-no-tabindex">
|
656 | <input id="input-tabindex-minus-1" tabIndex="-1">
|
657 | <input id="input-tabindex-0" tabIndex="0">
|
658 | <input id="input-tabindex-1" tabIndex="1">
|
659 | <input id="input-text-value" type="text" value="123">
|
660 | <input id="input-no-disabled" type="text">
|
661 | <input id="input-with-disabled" type="text" disabled>
|
662 | <input id="input-with-disabled-true" disabled="disabled">
|
663 | </div>
|
664 | <div>
|
665 | <label id="label-no-for">label with no for </label><input type="text" id="label-test-input">
|
666 | <label id="label-with-for" for="input-with-label">label with for </label><input type="text" id="input-with-label">
|
667 | </div>
|
668 |
|
669 | <div id="iframeContainer"></div>
|
670 |
|
671 |
|
672 |
|
673 | <svg id="surface" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"
|
674 | ><rect id="rect1" fill="rgb(255, 0, 0)" x="0" y="0" width="80" height="60" ry="0" rx="0" fill-rule="evenodd"
|
675 | /></svg>
|
676 |
|
677 |
|
678 | <object width="500" height="500" id="objectToEmpty" data="data:application/x-silverlight," type="application/x-silverlight"
|
679 | ><param name="background" value="transparent"
|
680 | /></object>
|
681 |
|
682 |
|
683 | <div id="emptyParent">
|
684 | <div id="emptyChild">
|
685 | <div id="emptyGrandchild">hello world</div>
|
686 | </div>
|
687 | </div>
|
688 |
|
689 |
|
690 | <iframe id="iframeToDestroy" src="about:blank"
|
691 | ><span></span
|
692 | ></iframe>
|
693 |
|
694 |
|
695 | <div id="divToRemoveFromDOM"
|
696 | ><div id="divToDestroy"></div
|
697 | ><div></div
|
698 | ></div>
|
699 | </body>
|
700 | </html>
|