Author: pyaschenko Date: 2010-03-17 09:19:31 -0400 (Wed, 17 Mar 2010) New Revision: 16586 Added: root/framework/trunk/impl/src/test/resources/javascript/jquery-position-qunit.js Modified: root/framework/trunk/impl/src/main/resources/META-INF/resources/jquery.position.js root/framework/trunk/impl/src/test/java/org/richfaces/javascript/QUnitTest.java root/framework/trunk/impl/src/test/resources/javascript/richfaces-client-api.html Log: jquery.position plugin changes + qunit tests Modified: root/framework/trunk/impl/src/main/resources/META-INF/resources/jquery.position.js =================================================================== --- root/framework/trunk/impl/src/main/resources/META-INF/resources/jquery.position.js 2010-03-17 12:05:36 UTC (rev 16585) +++ root/framework/trunk/impl/src/main/resources/META-INF/resources/jquery.position.js 2010-03-17 13:19:31 UTC (rev 16586) @@ -82,7 +82,7 @@ function getElementRect (element) { var jqe = $(element); var offset = jqe.offset(); - return {width: jqe.width(), height: jqe.height(), left: offset.left, top: offset.top}; + return {width: jqe.width(), height: jqe.height(), left: Math.floor(offset.left), top: Math.floor(offset.top)}; }; function checkCollision (elementRect, windowRect) { @@ -220,7 +220,6 @@ } if (isNaN(rect.top)) rect.top = top; - var elementOffset = element.offset(); var pos = {}; if (options.noPositionType) { pos.left = rect.left + rect.width + options.offset[0]; @@ -234,8 +233,9 @@ pos = calculatePosition(rect, options.offset, winRect, {width:width, height:height}, options); } - //pos.left -= elementOffset.left; - //pos.top -= elementOffset.top; + var elementOffset = element.offset(); + pos.left += left - Math.floor(elementOffset.left); + pos.top += top - Math.floor(elementOffset.top); if (left!=pos.left) { element.css('left', (pos.left + 'px')); Modified: root/framework/trunk/impl/src/test/java/org/richfaces/javascript/QUnitTest.java =================================================================== --- root/framework/trunk/impl/src/test/java/org/richfaces/javascript/QUnitTest.java 2010-03-17 12:05:36 UTC (rev 16585) +++ root/framework/trunk/impl/src/test/java/org/richfaces/javascript/QUnitTest.java 2010-03-17 13:19:31 UTC (rev 16586) @@ -98,7 +98,7 @@ } if (sb.length() > 0) { - fail("Failures:\n" + sb + "User Agent: " + doc.getElementById("userAgent").getTextContent()); + fail("Failures:\n" + sb + "User Agent: " + doc.getElementById("qunit-userAgent").getTextContent()); } } @@ -117,5 +117,6 @@ public void test() throws Exception { runTest(getClass().getClassLoader().getResource("javascript/4_0_0.html")); runTest(getClass().getClassLoader().getResource("javascript/richfaces-client-api.html"), "?richfaces-event"); + runTest(getClass().getClassLoader().getResource("javascript/richfaces-client-api.html"), "?jquery-position"); } } Added: root/framework/trunk/impl/src/test/resources/javascript/jquery-position-qunit.js =================================================================== --- root/framework/trunk/impl/src/test/resources/javascript/jquery-position-qunit.js (rev 0) +++ root/framework/trunk/impl/src/test/resources/javascript/jquery-position-qunit.js 2010-03-17 13:19:31 UTC (rev 16586) @@ -0,0 +1,318 @@ +RichFaces.QUnit.run(function(){ + module("jquery-position"); + + var body = document.getElementsByTagName("body")[0]; + + function appendDomElements(parent, html) { + var element = document.createElement("div"); + element.innerHTML = html; + var elements = [], e; + while (e = element.firstChild) { + elements.push(e); + parent.appendChild(e); + } + return elements; + } + + function removeDomElements(elements) { + var element; + while (elements.length>0) { + element = elements.pop(); + element.parentNode.removeChild(element); + } + } + + function testPositioning(element, left, top, comment) { + equals(element.style.left, left+"px", comment); + equals(element.style.top, top+"px", comment); + equals(jQuery(element).offset().left, left, comment); + equals(jQuery(element).offset().top, top, comment); + } + + function testPositioning1(element, left, top, left1, top1, comment) { + equals(element.style.left, left+"px", comment); + equals(element.style.top, top+"px", comment); + equals(jQuery(element).offset().left, left1, comment); + equals(jQuery(element).offset().top, top1, comment); + } + + // position general tests + test("source parameter test", function() { + expect(24); + + try { + + var elements = appendDomElements(body, '<div style="position:absolute; width:200px; height:200px; background-color:red" id="testElement">some text</div><div style="width:300px; height:300px; background-color:blue" id="testElement1">some text</div>'); + + var e = document.getElementById("testElement"); + var e1 = jQuery("#testElement1"); + + jQuery(e).setPosition("#testElement1", {from:"RB", to:"RB"}); + testPositioning(e, e1.offset().left+e1.width(), e1.offset().top+e1.height(), "jQuery selector"); + e.style.left=e.style.top="0px"; + + jQuery(e).setPosition({id:"testElement1"}, {from:"RB", to:"RB"}); + testPositioning(e, e1.offset().left+e1.width(), e1.offset().top+e1.height(), "object with id"); + e.style.left=e.style.top="0px"; + + jQuery(e).setPosition({left:300,top:300}, {from:"RB", to:"RB"}); + testPositioning(e, 300, 300, "object with left,top"); + e.style.left=e.style.top="0px"; + + jQuery(e).setPosition(jQuery("#testElement1"), {from:"RB", to:"RB"}); + testPositioning(e, e1.offset().left+e1.width(), e1.offset().top+e1.height(), "jQuery object"); + e.style.left=e.style.top="0px"; + + jQuery(e).setPosition(document.getElementById("testElement1"), {from:"RB", to:"RB"}); + testPositioning(e, e1.offset().left+e1.width(), e1.offset().top+e1.height(), "DOM element"); + e.style.left=e.style.top="0px"; + + jQuery(e).setPosition({type:"customEvent", pageX:300, pageY:300}, {from:"RB", to:"RB"}); + testPositioning(e, 300, 300, "Event"); + e.style.left=e.style.top="0px"; + + } finally { + removeDomElements(elements); + } + }); + + // position html markup's tests +/* + https://jira.jboss.org/jira/browse/RF-645 + Calendar: incorrectly positioned popup in richfaces-demo + IE7 +*/ + test("html markup 1", function() { + expect(4); + + try { + + var elements = appendDomElements(body, + '<form>'+ + '<table id="parent" width="100%" cellspacing="0" cellpadding="10" border="1" style="position: relative;">'+ + '<tbody>'+ + '<tr>'+ + '<td>'+ + '<table style="position:absolute; background-color:red" id="testElement">'+ + '<tr>'+ + '<td style="width:200px;height:200px">some text</td>'+ + '</tr>'+ + '</table>'+ + '</td>'+ + '</tr>'+ + '</tbody>'+ + '</table>'+ + '</form>'); + + var e = document.getElementById("testElement"); + var jqe = jQuery(e); + jqe.css('left', '0px'); + jqe.css('top', '0px'); + var offset = jqe.offset(); + jQuery(e).setPosition({left:300, top:300}); + testPositioning1(e, 300-Math.floor(offset.left), 300-Math.floor(offset.top), 300,300); + + } finally { + removeDomElements(elements); + } + }); + +/* + https://jira.jboss.org/jira/browse/RF-1314 + Calendar positioning bug. +*/ + test("html markup 2", function() { + expect(8); + + try { + + var elements = appendDomElements(body, + '<div style="height:350px;overflow-x:hidden;overflow-y:auto;width:300px">'+ + '<div style="height:200px"></div>'+ + '<table style="position:absolute; background-color:red" id="testElement">'+ + '<tr>'+ + '<td style="width:200px;height:200px">some text</td>'+ + '</tr>'+ + '</table>'+ + '<div style="position:absolute; width:200px; height:200px; background-color:blue" id="testElement1">some text</div>'+ + '<div style="height:200px"></div> '+ + '</div>'); + + var e = document.getElementById("testElement"); + jQuery(e).setPosition({left:300, top:300}); + testPositioning(e,300,300); + + var e = document.getElementById("testElement1"); + jQuery(e).setPosition({left:500, top:500}); + testPositioning(e,500,500); + + } finally { + removeDomElements(elements); + } + }); + + // --- + test("html markup 3", function() { + expect(4); + + try { + var elements = appendDomElements(body, + '<table width="400" align="center">'+ + '<tr>'+ + '<td>'+ + '<table style="position:absolute; background-color:red" id="testElement">'+ + '<tr>'+ + '<td style="width:200px;height:200px">some text</td>'+ + '</tr>'+ + '</table>'+ + '</td>'+ + '</tr>'+ + '</table>'); + + var e = document.getElementById("testElement"); + jQuery(e).setPosition({left:300, top:300}); + testPositioning(e,300,300); + + } finally { + removeDomElements(elements); + } + }); + + // --- + test("html markup 4", function() { + expect(8); + + try { + var elements = appendDomElements(body, + '<div style="position:absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; overflow: auto;">'+ + '<table style="position:absolute; background-color:red" id="testElement">'+ + '<tr>'+ + '<td style="width:200px;height:200px">some text</td>'+ + '</tr>'+ + '</table>'+ + '<div style="position:absolute; width:200px; height:200px; background-color:blue" id="testElement1">some text</div>'+ + '</div>'); + + var e = document.getElementById("testElement"); + jQuery(e).setPosition({left:300, top:300}); + testPositioning(e,300,300); + + var e = document.getElementById("testElement1"); + jQuery(e).setPosition({left:500, top:500}); + testPositioning(e,500,500); + + } finally { + removeDomElements(elements); + } + }); + + // --- + test("html markup 5", function() { + expect(8); + + try { + var elements = appendDomElements(body, + '<div style="position:absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; overflow: auto;">'+ + '<div>'+ + '<table style="position:absolute; background-color:red" id="testElement">'+ + '<tr>'+ + '<td style="width:200px;height:200px">some text</td>'+ + '</tr>'+ + '</table>'+ + '<div style="position:absolute; width:200px; height:200px; background-color:blue" id="testElement1">some text</div>'+ + '</div>'+ + '</div>'); + + var e = document.getElementById("testElement"); + jQuery(e).setPosition({left:300, top:300}); + testPositioning(e,300,300); + + var e = document.getElementById("testElement1"); + jQuery(e).setPosition({left:500, top:500}); + testPositioning(e,500,500); + + } finally { + removeDomElements(elements); + } + }); + + // --- + test("html markup 6", function() { + expect(8); + + try { + + var elements = appendDomElements(body, + '<div style="position:absolute; width:400px; top: 200px; left: 200px;">'+ + '<table style="position:absolute; background-color:red" id="testElement">'+ + '<tr>'+ + '<td style="width:200px;height:200px">some text</td>'+ + '</tr>'+ + '</table>'+ + '<div style="position:absolute; width:200px; height:200px; background-color:blue" id="testElement1">some text</div>'+ + '</div>'); + + var e = document.getElementById("testElement"); + jQuery(e).setPosition({left:300, top:300}); + testPositioning1(e,100,100,300,300); + + var e = document.getElementById("testElement1"); + jQuery(e).setPosition({left:500, top:500}); + testPositioning1(e,300,300,500,500); + + } finally { + removeDomElements(elements); + } + }); + + // --- + test("html markup 7", function() { + expect(8); + + try { + + var elements = appendDomElements(body, + '<div style="position:absolute; width:400px; top: 200px; left: 200px;">'+ + '<div>'+ + '<table style="position:absolute; background-color:red" id="testElement">'+ + '<tr>'+ + '<td style="width:200px;height:200px">some text</td>'+ + '</tr>'+ + '</table>'+ + '<div style="position:absolute; width:200px; height:200px; background-color:blue" id="testElement1">some text</div>'+ + '</div>'+ + '</div>'); + + var e = document.getElementById("testElement"); + jQuery(e).setPosition({left:300, top:300}); + testPositioning1(e,100,100,300,300); + + var e = document.getElementById("testElement1"); + jQuery(e).setPosition({left:500, top:500}); + testPositioning1(e,300,300,500,500); + + } finally { + removeDomElements(elements); + } + }); + + test("set the same position", function() { + expect(4); + + try { + + var elements = appendDomElements(body, + '<div id="testElement" style="position:absolute; width:400px; height: 400px, top: 200px; left: 200px;">some text</div>'); + + var e = document.getElementById("testElement"); + jQuery(e).setPosition({left:200, top:200}); + testPositioning(e,200,200); + + } finally { + removeDomElements(elements); + } + }); + + //TODO: add auto position tests // depends on some refactoring and optimization (not done yet) + +}); \ No newline at end of file Modified: root/framework/trunk/impl/src/test/resources/javascript/richfaces-client-api.html =================================================================== --- root/framework/trunk/impl/src/test/resources/javascript/richfaces-client-api.html 2010-03-17 12:05:36 UTC (rev 16585) +++ root/framework/trunk/impl/src/test/resources/javascript/richfaces-client-api.html 2010-03-17 13:19:31 UTC (rev 16586) @@ -8,10 +8,12 @@ <script type="text/javascript" src="../../classes/META-INF/resources/jquery.js"></script> <script type="text/javascript" src="qunit/qunit.js"></script> <script type="text/javascript" src="../../classes/META-INF/resources/richfaces.js"></script> + <script type="text/javascript" src="../../classes/META-INF/resources/jquery.position.js"></script> <script type="text/javascript" src="../../classes/META-INF/resources/richfaces-base-component.js"></script> <script type="text/javascript" src="../../classes/META-INF/resources/richfaces-event.js"></script> <script type="text/javascript" src="richfaces-qunit.js"></script> <script type="text/javascript" src="richfaces-event-qunit.js"></script> + <script type="text/javascript" src="jquery-position-qunit.js"></script> </head> <body> <h1 id="qunit-header">Richfaces Client API Tests</h1>