UNPKG

26 kBHTMLView Raw
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3<!--
4 we use a strict-mode DTD to ensure that the box model is the same for these
5 basic tests
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(/*DOMNode*/iframeNode){
18 //summary: Returns the document object associated with the iframe DOM Node argument.
19 var doc = iframeNode.contentDocument || // W3
20 (
21 (iframeNode.contentWindow)&&(iframeNode.contentWindow.document)
22 ) || // IE
23 (
24 (iframeNode.name)&&(document.frames[iframeNode.name])&&
25 (documendoh.frames[iframeNode.name].document)
26 ) || null;
27 return doc;
28 }
29
30 // IE gets confused by the iframe when you press Refresh so load them dynamically
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 // FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge
88 // "doh.is(100, dojo.marginBox('sq100nopos').w);",
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 // console.debug(pos);
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 // position() is getting us the border-box location
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 // Though coords shouldn't be used, test it for backward compatibility.
134 // coords returns the border-box location and margin-box size
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 // console.debug(pos);
149 doh.is(0, pos.x);
150 doh.t(pos.y > 0);
151 // FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge
152 // doh.is(100, pos.w);
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 // never compare floating numbers directly!
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 // test to make sure position() works with a variety of scrollbars
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 // resultReady is called from inside the iframe
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 // Make sure empty() doesn't disconnect grandchildren from children.
421 // Uncomment when http://bugs.dojotoolkit.org/ticket/16957 is fixed.
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:'&lt;html&gt&lt;body&gt;&lt;div id=subDiv&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;'"></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:'&lt;html&gt;&lt;head&gt;&lt;script&gt;frameElement.win=window&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;input id=10095_textbox&gt;&lt;/body&gt;&lt;/html&gt;'" 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 <!-- SVG element to test dojo.getComputedStyle on IE9 (#14103) -->
672 <!-- SVG element to test empty -->
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 <!-- OBJECT element to test empty -->
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 <!-- Test that empty doesn't disconnect grandchildren from children -->
683 <div id="emptyParent">
684 <div id="emptyChild">
685 <div id="emptyGrandchild">hello world</div>
686 </div>
687 </div>
688
689 <!-- IFRAME element to test destroy -->
690 <iframe id="iframeToDestroy" src="about:blank"
691 ><span></span
692 ></iframe>
693
694 <!-- DIV element to test destroy of element not in the DOM -->
695 <div id="divToRemoveFromDOM"
696 ><div id="divToDestroy"></div
697 ><div></div
698 ></div>
699 </body>
700</html>