PerfectEquation
/
GZ


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391
							<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<!--
	we use a strict-mode DTD to ensure that the box model is the same for these
	basic tests
-->
<html>
	<head>
		<title>testing Core HTML/DOM/CSS/Style utils</title>
		<style type="text/css">
			@import "../../resources/dojo.css";
		</style>
		<script type="text/javascript" 
			src="../../dojo.js" 
			djConfig="isDebug: true"></script>
		<script type="text/javascript">
			dojo.require("doh.runner");

			function getIframeDocument(/*DOMNode*/iframeNode){
				//summary: Returns the document object associated with the iframe DOM Node argument.
				var doc = iframeNode.contentDocument || // W3
					(
						(iframeNode.contentWindow)&&(iframeNode.contentWindow.document)
					) ||  // IE
					(
						(iframeNode.name)&&(document.frames[iframeNode.name])&&
						(document.frames[iframeNode.name].document)
					) || null;
				return doc;
			}

			dojo.addOnLoad(function(){
				doh.register("t", 
					[
						"t.is(100, dojo.marginBox('sq100').w);",
						"t.is(100, dojo.marginBox('sq100').h);",

						"t.is(120, dojo.marginBox('sq100margin10').w);",
						"t.is(120, dojo.marginBox('sq100margin10').h);",
						"t.is(100, dojo.contentBox('sq100margin10').w);",
						"t.is(100, dojo.contentBox('sq100margin10').h);",

						"t.is(140, dojo.marginBox('sq100margin10pad10').w);",
						"t.is(140, dojo.marginBox('sq100margin10pad10').h);",

						"t.is(120, dojo.marginBox('sq100pad10').w);",
						"t.is(120, dojo.marginBox('sq100pad10').h);",

						"t.is(110, dojo.marginBox('sq100ltpad10').w);",
						"t.is(110, dojo.marginBox('sq100ltpad10').h);",
						"t.is(100, dojo.contentBox('sq100ltpad10').w);",
						"t.is(100, dojo.contentBox('sq100ltpad10').h);",

						"t.is(120, dojo.marginBox('sq100ltpad10rbmargin10').w);",
						"t.is(120, dojo.marginBox('sq100ltpad10rbmargin10').h);",

						"t.is(120, dojo.marginBox('sq100border10').w);",
						"t.is(120, dojo.marginBox('sq100border10').h);",
						"t.is(100, dojo.contentBox('sq100border10').w);",
						"t.is(100, dojo.contentBox('sq100border10').h);",

						"t.is(140, dojo.marginBox('sq100border10margin10').w);",
						"t.is(140, dojo.marginBox('sq100border10margin10').h);",
						"t.is(100, dojo.contentBox('sq100border10margin10').w);",
						"t.is(100, dojo.contentBox('sq100border10margin10').h);",

						"t.is(160, dojo.marginBox('sq100border10margin10pad10').w);",
						"t.is(160, dojo.marginBox('sq100border10margin10pad10').h);",
						"t.is(100, dojo.contentBox('sq100border10margin10pad10').w);",
						"t.is(100, dojo.contentBox('sq100border10margin10pad10').h);",

						// FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge
						// "t.is(100, dojo.marginBox('sq100nopos').w);", 
						"t.is(100, dojo.marginBox('sq100nopos').h);",
						
						"t.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).l);",
						"t.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).t);",
						"t.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).w);",
						"t.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).h);",

						"t.is(0, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).l);",
						"t.is(0, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).t);",
						"t.is(10, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).w);",
						"t.is(10, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).h);",

						"t.is(10, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).l);",
						"t.is(10, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).t);",
						"t.is(20, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).w);",
						"t.is(20, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).h);",

						"t.is(20, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).l);",
						"t.is(20, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).t);",
						"t.is(40, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).w);",
						"t.is(40, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).h);",

						function coordsBasic(t){
							var pos = dojo.coords("sq100", false);
							// console.debug(pos);
							t.is(100, pos.x);
							t.is(100, pos.y);
							t.is(100, pos.w);
							t.is(100, pos.h);
						},
						function coordsMargin(t){
							// coords is getting us the margin-box location, is
							// this right?
							var pos = dojo.coords("sq100margin10", false);
							t.is(260, pos.x);
							t.is(110, pos.y);
							t.is(120, pos.w);
							t.is(120, pos.h);
						},
						function sq100nopos(t){
							var pos = dojo.coords("sq100nopos", false);
							// console.debug(pos);
							t.is(0, pos.x);
							t.t(pos.y > 0);
							// FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge
							// t.is(100, pos.w);
							t.is(100, pos.h);
						},
						function coordsScrolled(t) {
							var s = document.createElement('div');
							var c = document.createElement('div');
							document.body.appendChild(s);
							s.appendChild(c);
							var x=257, y= 285;
							with (s.style) {
								position = 'absolute';
								overflow = 'scroll';
							}	
							dojo._setMarginBox(s, x, y, 100, 100);
							dojo._setMarginBox(c, 0, 0, 500, 500);
							s.scrollTop = 200;
							var pos = dojo.coords(s, true);
							t.is(x, pos.x);
							t.is(y, pos.y);
						},
						"t.is(1, dojo.style('sq100nopos', 'opacity'));",
						"t.is(0.1, dojo.style('sq100nopos', 'opacity', 0.1));",
						"t.is(0.8, dojo.style('sq100nopos', 'opacity', 0.8));",
						"t.is('static', dojo.style('sq100nopos', 'position'));",
						function getBgcolor(t){
							var bgc = dojo.style('sq100nopos', 'backgroundColor');
							t.t((bgc == "rgb(0, 0, 0)")||(bgc == "black")||(bgc == "#000000"));
						},
						function isDescendant(t){
							t.t(dojo.isDescendant("sq100", dojo.body()));
							t.t(dojo.isDescendant("sq100", dojo.doc));
							t.t(dojo.isDescendant("sq100", "sq100"));
							t.t(dojo.isDescendant(dojo.byId("sq100"), "sq100"));
							t.f(dojo.isDescendant("sq100", dojo.byId("sq100").firstChild));
							t.t(dojo.isDescendant(dojo.byId("sq100").firstChild, "sq100"));
						},
						function isDescendantIframe(t){
							var bif = dojo.byId("blah");
							getIframeDocument(bif).write("<html><body><div id='subDiv'></div></body></html>");
							getIframeDocument(bif).close();
							// this test barely makes sense. disabling it for now.
							// t.t(dojo.isDescendant(bif.contentDocument.getElementById("subDiv"), bif.parentNode));
							var subDiv = getIframeDocument(bif).getElementById("subDiv");
							t.t(dojo.isDescendant(subDiv, subDiv));
							t.t(dojo.isDescendant(subDiv, subDiv.parentNode));
							t.f(dojo.isDescendant(subDiv.parentNode, subDiv));

						},
						function testClassFunctions(t){
							var node = dojo.byId("sq100");
							dojo.addClass(node, "a");
							t.is("a", node.className);
							dojo.removeClass(node, "c");
							t.is("a", node.className);
							t.assertTrue(dojo.hasClass(node, "a"));
							t.assertFalse(dojo.hasClass(node, "b"));
							dojo.addClass(node, "b");
							t.is("a b", node.className);
							t.assertTrue(dojo.hasClass(node, "a"));
							t.assertTrue(dojo.hasClass(node, "b"));
							dojo.removeClass(node, "a");
							t.is("b", node.className);
							t.assertFalse(dojo.hasClass(node, "a"));
							t.assertTrue(dojo.hasClass(node, "b"));
							dojo.toggleClass(node, "a");
							t.is("b a", node.className);
							t.assertTrue(dojo.hasClass(node, "a"));
							t.assertTrue(dojo.hasClass(node, "b"));
							dojo.toggleClass(node, "a");
							t.is("b", node.className);
							t.assertFalse(dojo.hasClass(node, "a"));
							t.assertTrue(dojo.hasClass(node, "b"));
							dojo.toggleClass(node, "b");
							t.is("", node.className);
							t.assertFalse(dojo.hasClass(node, "a"));
							t.assertFalse(dojo.hasClass(node, "b"));
							dojo.removeClass(node, "c");
							t.assertTrue(!node.className);
						}
					]
				);
				doh.run();
			});
		</script>
		<style type="text/css">
			html, body {
				padding: 0px;
				margin: 0px;
				border: 0px;
			}

			#sq100 {
				background-color: black;
				color: white;
				position: absolute;
				left: 100px;
				top: 100px;
				width: 100px;
				height: 100px;
				border: 0px;
				padding: 0px;
				margin: 0px;
				overflow: hidden;
			}

			#sq100margin10 {
				background-color: black;
				color: white;
				position: absolute;
				left: 250px;
				top: 100px;
				width: 100px;
				height: 100px;
				border: 0px;
				padding: 0px;
				margin: 10px;
				overflow: hidden;
			}

			#sq100margin10pad10 {
				background-color: black;
				color: white;
				position: absolute;
				left: 400px;
				top: 100px;
				width: 100px;
				height: 100px;
				border: 0px;
				padding: 10px;
				margin: 10px;
				overflow: hidden;
			}

			#sq100pad10 {
				background-color: black;
				color: white;
				position: absolute;
				left: 100px;
				top: 250px;
				width: 100px;
				height: 100px;
				border: 0px;
				padding: 10px;
				margin: 0px;
				overflow: hidden;
			}

			#sq100ltpad10 {
				background-color: black;
				color: white;
				position: absolute;
				left: 250px;
				top: 250px;
				width: 100px;
				height: 100px;
				border: 0px;
				padding-left: 10px;
				padding-top: 10px;
				padding-right: 0px;
				padding-bottom: 0px;
				margin: 0px;
				overflow: hidden;
			}

			#sq100ltpad10rbmargin10 {
				background-color: black;
				color: white;
				position: absolute;
				left: 400px;
				top: 250px;
				width: 100px;
				height: 100px;
				border: 0px;
				padding-left: 10px;
				padding-top: 10px;
				padding-right: 0px;
				padding-bottom: 0px;
				margin-left: 0px;
				margin-top: 0px;
				margin-right: 10px;
				margin-bottom: 10px;
				overflow: hidden;
			}

			#sq100border10 {
				background-color: black;
				color: white;
				position: absolute;
				left: 100px;
				top: 400px;
				width: 100px;
				height: 100px;
				border: 10px solid yellow;
				padding: 0px;
				margin: 0px;
				overflow: hidden;
			}

			#sq100border10margin10 {
				background-color: black;
				color: white;
				position: absolute;
				left: 250px;
				top: 400px;
				width: 100px;
				height: 100px;
				border: 10px solid yellow;
				padding: 0px;
				margin: 10px;
				overflow: hidden;
			}

			#sq100border10margin10pad10 {
				background-color: black;
				color: white;
				position: absolute;
				left: 400px;
				top: 400px;
				width: 100px;
				height: 100px;
				border: 10px solid yellow;
				padding: 10px;
				margin: 10px;
				overflow: hidden;
			}

			#sq100nopos {
				background-color: black;
				color: white;
				width: 100px;
				height: 100px;
				padding: 0px;
				margin: 0px;
			}

		</style>
	</head>
	<body>
		<h1>testing Core HTML/DOM/CSS/Style utils</h1>
		<div id="sq100">
			100px square, abs
		</div>
		<div id="sq100margin10">
			100px square, abs, 10px margin
		</div>
		<div id="sq100margin10pad10">
			100px square, abs, 10px margin, 10px padding
		</div>
		<div id="sq100pad10">
			100px square, abs, 10px padding
		</div>
		<div id="sq100ltpad10">
			100px square, abs, 10px left and top padding
		</div>
		<div id="sq100ltpad10rbmargin10">
			100px square, abs, 10px left and top padding, 10px bottom and right margin
		</div>
		<div id="sq100border10">
			100px square, abs, 10px yellow border
		</div>
		<div id="sq100border10margin10">
			100px square, abs, 10px yellow border, 10px margin
		</div>
		<div id="sq100border10margin10pad10">
			100px square, abs, 10px yellow border, 10px margin, 10px padding
		</div>
		<div id="sq100nopos">
			100px square, no positioning
		</div>
		<iframe id="blah"></iframe>
	</body>
</html>