Ticket #6921: abs_wip.2.patch
| File abs_wip.2.patch, 4.4 kB (added by haysmark, 6 months ago) |
|---|
-
_base/html.js
924 924 925 925 // targetBoxType == "border-box" 926 926 var db = d.body(); 927 if(d.isIE ){927 if(d.isIE || (d.isFF >= 3)){ 928 928 var client = node.getBoundingClientRect(); 929 var offset = (d.isIE) ? d._getIeDocumentElementOffset() : { x: 0, y: 0}; 929 var cs; 930 if(d.isFF){ 931 // in FF3 you have to subract the document element margins 932 var dv = node.ownerDocument.defaultView; 933 cs=dv.getComputedStyle(db.parentNode, null); 934 } 935 var offset = (d.isIE) ? d._getIeDocumentElementOffset() : { x: px(db.parentNode,cs.marginLeft), y: px(db.parentNode,cs.marginTop)}; 930 936 ret.x = client.left - offset.x; 931 937 ret.y = client.top - offset.y; 932 938 }else{ … … 948 954 // Opera seems to be double counting for some elements 949 955 ret.x -= _sumAncestorProperties(node, "scrollLeft"); 950 956 ret.y -= _sumAncestorProperties(node, "scrollTop"); 957 951 958 var curnode = node; 952 959 do{ 953 960 var n = curnode.offsetLeft; … … 964 971 if(d.isSafari){ 965 972 ret.x += px(curnode, cs.borderLeftWidth); 966 973 ret.y += px(curnode, cs.borderTopWidth); 967 }else if(d.isMozilla && curnode != db){ 968 ret.x += px(curnode, cs.paddingLeft)+px(curnode, cs.marginLeft); 969 ret.y += px(curnode, cs.paddingTop)+px(curnode, cs.marginTop); 974 }else if(d.isFF){ 975 // tried left+right with differently sized left/right borders 976 // it really is 2xleft border in FF, not left+right, even in RTL! 977 ret.x += 2*px(curnode,cs.borderLeftWidth); 978 ret.y += 2*px(curnode,cs.borderTopWidth); 970 979 } 971 980 } 981 // FIXME: static children in a static div in FF2 are affected by the div's border as well 982 // but offsetParent will skip this div! 972 983 curnode = curnode.offsetParent; 973 984 }while((curnode != endNode) && curnode); 974 985 }else if(node.x && node.y){ -
tests/_base/abs.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 1 2 <html> 2 3 <head> 3 4 <title>supplementary dojo._abs() tests</title> … … 12 13 /* position a red square over pressed button */ 13 14 var pos = dojo._abs(this, true); 14 15 var marker = document.createElement('div'); 16 document.body.appendChild(marker); 15 17 marker.className = "marker"; 16 with (marker.style) { 17 top = pos.y; 18 left = pos.x; 19 } 18 marker.style.position="absolute"; 19 marker.style.top = pos.y+"px"; 20 marker.style.left = pos.x+"px"; 20 21 console.log(marker); 21 document.body.appendChild(marker);22 return false; 22 23 } 23 24 24 25 dojo.addOnLoad(function(){ … … 41 42 width: 10px; 42 43 height: 10px; 43 44 border: none; 44 margin: 0 ;45 padding: 0 ;45 margin: 0px; 46 padding: 0px; 46 47 background-color: red; 47 48 } 48 49 … … 52 53 53 54 div { 54 55 position: absolute; 55 border: 3px solid gray; 56 padding: 6px; 56 border: 17px solid gray; 57 padding: 37px; 58 margin: 29px; 57 59 overflow: auto; 58 60 } 59 61 … … 62 64 <body> 63 65 <h1>supplementary dojo._abs() tests</h1> 64 66 <button style="top: 100px; left: 200px;">click</button> 65 <button style="top: 800px; left: 200px;">click</button>67 <button style="top: 900px; left: 200px;">click</button> 66 68 <div id="outer" style="position: absolute; top: 300px; left: 100px; height: 400px; width: 600px;"> 67 69 <button style="top: 50px; left: 200px;">click2</button> 68 <div id="middle" style="position: absolute; top: 100px; left: 100px; height: 400px; width: 400px; ">70 <div id="middle" style="position: absolute; top: 100px; left: 100px; height: 400px; width: 400px; border-width:13px 11px 23px 7px;"> 69 71 <div id="staticDiv" style="position: static; margin-top: 20px;"> 70 72 <button style="position: static;">click3</button> 71 73 <br><br><br><br><br> … … 76 78 <button style="top: 500px; left: 100px;">click6</button> 77 79 </div> 78 80 <button style="position: static;">click7</button> 79 <button style="position: relative; top: 10px; left: 10px;" >click8</button>81 <button style="position: relative; top: 10px; left: 10px;" id="click8">click8</button> 80 82 <button style="top: 300px; left: 200px;">click9</button> 81 83 </div> 82 84 </div>
