diff options
Diffstat (limited to 'swat/apps/qooxdoo-examples/test/CrossBrowser_2.html')
-rw-r--r-- | swat/apps/qooxdoo-examples/test/CrossBrowser_2.html | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/swat/apps/qooxdoo-examples/test/CrossBrowser_2.html b/swat/apps/qooxdoo-examples/test/CrossBrowser_2.html new file mode 100644 index 0000000000..58b4318cd8 --- /dev/null +++ b/swat/apps/qooxdoo-examples/test/CrossBrowser_2.html @@ -0,0 +1,128 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>Tests for crossbrowser offsetTop and offsetLeft properties provided by qx.dom</p> + </div> + + <style type="text/css"> + +#i{ + border: 1px solid red; +} + +#l{ + position: absolute; + + top: 100px; + left: 100px; + + width: 300px; + height: 300px; + + overflow: auto; + border: 6px solid red; + padding: 10px; +} + +#p1{ + position: static; + + width: 100px; + height: 100px; + + overflow: auto; + + border: 5px solid orange; + padding: 5px; +} + +#p2{ + position: absolute; + + top: 150px; + left: 150px; + + width: 100px; + height: 100px; + + overflow: auto; + + border: 5px solid orange; + padding: 3px; +} + +#p1 div, +#p2 div{ + border: 2px solid blue; + padding: 4px; +} + </style> + + <br/><br/><br/><br/><br/> + <p id="i">Inline</p> + + <div id="l"> + <div id="p1"> + <div id="p1a">P1-A</div> + <div id="p1b">P1-B</div> + <div id="p1c">P1-C</div> + <div id="p1d">P1-D</div> + <div id="p1e">P1-E</div> + <div id="p1f">P1-F</div> + <div id="p1g">P1-G</div> + <div id="p1h">P1-H</div> + <div id="p1j">P1-I</div> + </div> + <div id="p2"> + <div id="p2a">P2-A</div> + <div id="p2b">P2-B</div> + <div id="p2c">P2-C</div> + <div id="p2d">P2-D</div> + <div id="p2e">P2-E</div> + <div id="p2f">P2-F</div> + <div id="p2g">P2-G</div> + <div id="p2h">P2-H</div> + <div id="p2j">P2-I</div> + </div> + </div> + + <script type="text/javascript"> + qx.core.Init.getInstance().defineMain(function() + { + var d = qx.ui.core.ClientDocument.getInstance(); + + var i = document.getElementById("i"); + var l = document.getElementById("l"); + var p1 = document.getElementById("p1"); + var p2 = document.getElementById("p2"); + var p1a = document.getElementById("p1a"); + var p2a = document.getElementById("p2a"); + + qx.core.Init.getInstance().debug("Browser-Impl", "I: " + i.offsetLeft + "x" + i.offsetTop); + qx.core.Init.getInstance().debug("Browser-Impl", "L: " + l.offsetLeft + "x" + l.offsetTop); + qx.core.Init.getInstance().debug("Browser-Impl", "P1: " + p1.offsetLeft + "x" + p1.offsetTop); + qx.core.Init.getInstance().debug("Browser-Impl", "P2: " + p2.offsetLeft + "x" + p2.offsetTop); + qx.core.Init.getInstance().debug("Browser-Impl", "P1A: " + p1a.offsetLeft + "x" + p1a.offsetTop); + qx.core.Init.getInstance().debug("Browser-Impl", "P2A: " + p2a.offsetLeft + "x" + p2a.offsetTop); + + qx.core.Init.getInstance().debug("QxDom-Impl", "I: " + qx.dom.DomOffset.getLeft(i) + "x" + qx.dom.DomOffset.getTop(i)); + qx.core.Init.getInstance().debug("QxDom-Impl", "L: " + qx.dom.DomOffset.getLeft(l) + "x" + qx.dom.DomOffset.getTop(l)); + qx.core.Init.getInstance().debug("QxDom-Impl", "P1: " + qx.dom.DomOffset.getLeft(p1) + "x" + qx.dom.DomOffset.getTop(p1)); + qx.core.Init.getInstance().debug("QxDom-Impl", "P2: " + qx.dom.DomOffset.getLeft(p2) + "x" + qx.dom.DomOffset.getTop(p2)); + qx.core.Init.getInstance().debug("QxDom-Impl", "P1A: " + qx.dom.DomOffset.getLeft(p1a) + "x" + qx.dom.DomOffset.getTop(p1a)); + qx.core.Init.getInstance().debug("QxDom-Impl", "P2A: " + qx.dom.DomOffset.getLeft(p2a) + "x" + qx.dom.DomOffset.getTop(p2a)); + }); + </script> +</body> +</html> |