Context Navigation

html_quirks.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 11.0 KB

Line
1	<html>
2	<!--
3	we use a quirks-mode DTD on purpose to ensure that things go tilt. Wheee!!
4	-->
5	<head>
6	<title>testing Core HTML/DOM/CSS/Style utils in quirks mode</title>
7	<style type="text/css">
8	@import "../../resources/dojo.css";
9	</style>
10	<script type="text/javascript" src="../../dojo.js" data-dojo-config="isDebug:true"></script>
11	<script type="text/javascript">
12	require(["dojo", "doh", "dojo/sniff", "dojo/domReady!"], function(dojo, doh, has){
13	doh.register("t",
14	[
15	"t.is(100, dojo.marginBox('sq100').w);",
16	"t.is(100, dojo.marginBox('sq100').h);",
17
18	"t.is(120, dojo.marginBox('sq100margin10').w);",
19	"t.is(120, dojo.marginBox('sq100margin10').h);",
20	"t.is(100, dojo.contentBox('sq100margin10').w);",
21	"t.is(100, dojo.contentBox('sq100margin10').h);",
22
23	// FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge
24	//"t.is(100, dojo.marginBox('sq100nopos').w);",
25	"t.is(100, dojo.marginBox('sq100nopos').h);",
26
27	function coordsBasic(t){
28	var pos = dojo.position("sq100", false);
29	// console.debug(pos);
30	t.is(100, pos.x);
31	t.is(100, pos.y);
32	t.is(100, pos.w);
33	t.is(100, pos.h);
34	},
35	function coordsMargin(t){
36	// position() is getting us the border-box location
37	var pos = dojo.position("sq100margin10", false);
38	t.is(260, pos.x);
39	t.is(110, pos.y);
40	t.is(100, pos.w);
41	t.is(100, pos.h);
42	pos = dojo.marginBox("sq100margin10");
43	t.is(120, pos.w);
44	t.is(120, pos.h);
45	// Though coords shouldn't be used, test it for backward compatibility.
46	// coords returns the border-box location and margin-box size
47	pos = dojo.coords("sq100margin10", false);
48	t.is(260, pos.x);
49	t.is(110, pos.y);
50	t.is(120, pos.w);
51	t.is(120, pos.h);
52	},
53	function coordsBorder(t){
54	var pos = dojo.position("sq100border10", false);
55	t.is(100, pos.x);
56	t.is(400, pos.y);
57	},
58	function sq100nopos(t){
59	var pos = dojo.position("sq100nopos", false);
60	// console.debug(pos);
61	t.is(0, pos.x);
62	t.t(pos.y > 0);
63	// FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge
64	//t.is(100, pos.w);
65	t.is(100, pos.h);
66	}
67	]
68	);
69	if(has("ie") <= 9){
70	// IE collapses padding in quirks mode. We just report on it.
71	doh.register("t",
72	[
73	"t.is(120, dojo.marginBox('sq100margin10pad10').w);",
74	"t.is(120, dojo.marginBox('sq100margin10pad10').h);",
75
76	"t.is(100, dojo.marginBox('sq100pad10').w);",
77	"t.is(100, dojo.marginBox('sq100pad10').h);",
78
79	"t.is(100, dojo.marginBox('sq100ltpad10').w);",
80	"t.is(100, dojo.marginBox('sq100ltpad10').h);",
81	"t.is(90, dojo.contentBox('sq100ltpad10').w);",
82	"t.is(90, dojo.contentBox('sq100ltpad10').h);",
83
84	"t.is(110, dojo.marginBox('sq100ltpad10rbmargin10').w);",
85	"t.is(110, dojo.marginBox('sq100ltpad10rbmargin10').h);",
86
87	"t.is(100, dojo.marginBox('sq100border10').w);",
88	"t.is(100, dojo.marginBox('sq100border10').h);",
89	"t.is(80, dojo.contentBox('sq100border10').w);",
90	"t.is(80, dojo.contentBox('sq100border10').h);",
91
92	"t.is(120, dojo.marginBox('sq100border10margin10').w);",
93	"t.is(120, dojo.marginBox('sq100border10margin10').h);",
94	"t.is(80, dojo.contentBox('sq100border10margin10').w);",
95	"t.is(80, dojo.contentBox('sq100border10margin10').h);",
96
97	"t.is(120, dojo.marginBox('sq100border10margin10pad10').w);",
98	"t.is(120, dojo.marginBox('sq100border10margin10pad10').h);",
99	"t.is(60, dojo.contentBox('sq100border10margin10pad10').w);",
100	"t.is(60, dojo.contentBox('sq100border10margin10pad10').h);"
101	]
102	);
103	}else{
104	doh.register("t",
105	[
106	"t.is(140, dojo.marginBox('sq100margin10pad10').w);",
107	"t.is(140, dojo.marginBox('sq100margin10pad10').h);",
108
109	"t.is(120, dojo.marginBox('sq100pad10').w);",
110	"t.is(120, dojo.marginBox('sq100pad10').h);",
111
112	"t.is(110, dojo.marginBox('sq100ltpad10').w);",
113	"t.is(110, dojo.marginBox('sq100ltpad10').h);",
114	"t.is(100, dojo.contentBox('sq100ltpad10').w);",
115	"t.is(100, dojo.contentBox('sq100ltpad10').h);",
116
117	"t.is(120, dojo.marginBox('sq100ltpad10rbmargin10').w);",
118	"t.is(120, dojo.marginBox('sq100ltpad10rbmargin10').h);",
119
120	"t.is(120, dojo.marginBox('sq100border10').w);",
121	"t.is(120, dojo.marginBox('sq100border10').h);",
122	"t.is(100, dojo.contentBox('sq100border10').w);",
123	"t.is(100, dojo.contentBox('sq100border10').h);",
124
125	"t.is(140, dojo.marginBox('sq100border10margin10').w);",
126	"t.is(140, dojo.marginBox('sq100border10margin10').h);",
127	"t.is(100, dojo.contentBox('sq100border10margin10').w);",
128	"t.is(100, dojo.contentBox('sq100border10margin10').h);",
129
130	"t.is(160, dojo.marginBox('sq100border10margin10pad10').w);",
131	"t.is(160, dojo.marginBox('sq100border10margin10pad10').h);",
132	"t.is(100, dojo.contentBox('sq100border10margin10pad10').w);",
133	"t.is(100, dojo.contentBox('sq100border10margin10pad10').h);"
134	]
135	);
136	}
137
138	doh.register("t",
139	[
140	function emptySvg(t){
141	dojo.empty(dojo.byId("surface"));
142	doh.f(!!dojo.byId("surface").firstChild, "svg firstChild");
143	},
144	function destroySvg(t){
145	dojo.destroy(dojo.byId("surface"));
146	doh.f(!!dojo.byId("surface"), "svg byId");
147	},
148	function emptyObject(t){
149	dojo.empty(dojo.byId("objectToEmpty"));
150	doh.f(!!dojo.byId("objectToEmpty").firstChild, "object firstChild");
151	},
152	function destroyObject(t){
153	dojo.destroy(dojo.byId("objectToEmpty"));
154	doh.f(!!dojo.byId("objectToEmpty"), "object byId");
155	},
156	function destroyIframe(t){
157	dojo.destroy(dojo.byId("iframeToDestroy"));
158	doh.f(!!dojo.byId("iframeToDestroy"), "iframe byId");
159	},
160	function destroyDivNotInDOM(t){
161	var p = dojo.byId("divToRemoveFromDOM");
162	var n = dojo.byId("divToDestroy");
163	p = p.parentNode.removeChild(p);
164	doh.f(!!dojo.byId("divToRemoveFromDOM"), "div byId");
165	doh.t(!!p.firstChild, "div child 1");
166	doh.is(p.firstChild, n, "div 1st child");
167	doh.isNot(p.firstChild, p.lastChild, "div 1st child");
168	dojo.destroy(n);
169	doh.t(!!p.firstChild, "div child 2");
170	doh.isNot(p.firstChild, n, "div 2nd child");
171	doh.is(p.firstChild, p.lastChild, "div 2nd child");
172	dojo.empty(p);
173	doh.f(!!p.firstChild, "div child 3");
174	dojo.destroy(p);
175	doh.t(true, "no exception thrown");
176	}
177	]
178	);
179
180	doh.runOnLoad();
181	});
182	</script>
183	<style type="text/css">
184	html, body {
185	padding: 0px;
186	margin: 0px;
187	border: 0px;
188	}
189
190	#sq100 {
191	background-color: black;
192	color: white;
193	position: absolute;
194	left: 100px;
195	top: 100px;
196	width: 100px;
197	height: 100px;
198	border: 0px;
199	padding: 0px;
200	margin: 0px;
201	overflow: hidden;
202	}
203
204	#sq100margin10 {
205	background-color: black;
206	color: white;
207	position: absolute;
208	left: 250px;
209	top: 100px;
210	width: 100px;
211	height: 100px;
212	border: 0px;
213	padding: 0px;
214	margin: 10px;
215	overflow: hidden;
216	}
217
218	#sq100margin10pad10 {
219	background-color: black;
220	color: white;
221	position: absolute;
222	left: 400px;
223	top: 100px;
224	width: 100px;
225	height: 100px;
226	border: 0px;
227	padding: 10px;
228	margin: 10px;
229	overflow: hidden;
230	}
231
232	#sq100pad10 {
233	background-color: black;
234	color: white;
235	position: absolute;
236	left: 100px;
237	top: 250px;
238	width: 100px;
239	height: 100px;
240	border: 0px;
241	padding: 10px;
242	margin: 0px;
243	overflow: hidden;
244	}
245
246	#sq100ltpad10 {
247	background-color: black;
248	color: white;
249	position: absolute;
250	left: 250px;
251	top: 250px;
252	width: 100px;
253	height: 100px;
254	border: 0px;
255	padding-left: 10px;
256	padding-top: 10px;
257	padding-right: 0px;
258	padding-bottom: 0px;
259	margin: 0px;
260	overflow: hidden;
261	}
262
263	#sq100ltpad10rbmargin10 {
264	background-color: black;
265	color: white;
266	position: absolute;
267	left: 400px;
268	top: 250px;
269	width: 100px;
270	height: 100px;
271	border: 0px;
272	padding-left: 10px;
273	padding-top: 10px;
274	padding-right: 0px;
275	padding-bottom: 0px;
276	margin-left: 0px;
277	margin-top: 0px;
278	margin-right: 10px;
279	margin-bottom: 10px;
280	overflow: hidden;
281	}
282
283	#sq100border10 {
284	background-color: black;
285	color: white;
286	position: absolute;
287	left: 100px;
288	top: 400px;
289	width: 100px;
290	height: 100px;
291	border: 10px solid yellow;
292	padding: 0px;
293	margin: 0px;
294	overflow: hidden;
295	}
296
297	#sq100border10margin10 {
298	background-color: black;
299	color: white;
300	position: absolute;
301	left: 250px;
302	top: 400px;
303	width: 100px;
304	height: 100px;
305	border: 10px solid yellow;
306	padding: 0px;
307	margin: 10px;
308	overflow: hidden;
309	}
310
311	#sq100border10margin10pad10 {
312	background-color: black;
313	color: white;
314	position: absolute;
315	left: 400px;
316	top: 400px;
317	width: 100px;
318	height: 100px;
319	border: 10px solid yellow;
320	padding: 10px;
321	margin: 10px;
322	overflow: hidden;
323	}
324
325	#sq100nopos {
326	background-color: black;
327	color: white;
328	width: 100px;
329	height: 100px;
330	padding: 0px;
331	margin: 0px;
332	}
333
334	</style>
335	</head>
336	<body>
337	<h1>testing Core HTML/DOM/CSS/Style utils</h1>
338	<div id="sq100">
339	100px square, abs
340	</div>
341	<div id="sq100margin10">
342	100px square, abs, 10px margin
343	</div>
344	<div id="sq100margin10pad10">
345	100px square, abs, 10px margin, 10px padding
346	</div>
347	<div id="sq100pad10">
348	100px square, abs, 10px padding
349	</div>
350	<div id="sq100ltpad10">
351	100px square, abs, 10px left and top padding
352	</div>
353	<div id="sq100ltpad10rbmargin10">
354	100px square, abs, 10px left and top padding, 10px bottom and right margin
355	</div>
356	<div id="sq100border10">
357	100px square, abs, 10px yellow border
358	</div>
359	<div id="sq100border10margin10">
360	100px square, abs, 10px yellow border, 10px margin
361	</div>
362	<div id="sq100border10margin10pad10">
363	100px square, abs, 10px yellow border, 10px margin, 10px padding
364	</div>
365	<div id="sq100nopos">
366	100px square, no positioning
367	</div>
368
369	<!-- SVG element to test empty -->
370	<svg id="surface" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"
371	><rect id="rect1" fill="rgb(255, 0, 0)" x="0" y="0" width="80" height="60" ry="0" rx="0" fill-rule="evenodd"
372	/></svg>
373
374	<!-- OBJECT element to test empty -->
375	<object width="500" height="500" id="objectToEmpty" data="data:application/x-silverlight," type="application/x-silverlight"
376	><param name="background" value="transparent"
377	/></object>
378
379	<!-- IFRAME element to test destroy -->
380	<iframe id="iframeToDestroy" src="about:blank"
381	><span></span
382	></iframe>
383
384	<!-- DIV element to test destroy of element not in the DOM -->
385	<div id="divToRemoveFromDOM"
386	><div id="divToDestroy"></div
387	><div></div
388	></div>
389	</body>
390	</html>
391

Note: See TracBrowser for help on using the repository browser.

Context Navigation

source: Dev/trunk/src/client/dojo/tests/_base/html_quirks.html

Download in other formats: