mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-12-01 17:23:59 +00:00
Fix offsetLeft/Top for nested tables and clientLeft/Top for some elements with non-zero margins. b=375003 r+sr=roc
This commit is contained in:
mats.palmgren@bredband.net
parent
e904667847
commit
88e0a73d19
@ -522,15 +522,17 @@ IsBody(nsIContent *aContent)
|
||||
aContent->IsNodeOfType(nsINode::eHTML));
|
||||
}
|
||||
|
||||
static PRBool
|
||||
IsOffsetParent(nsIContent *aContent)
|
||||
{
|
||||
nsINodeInfo *ni = aContent->NodeInfo();
|
||||
static PRBool IS_TABLE_CELL(nsIAtom* frameType) {
|
||||
return nsGkAtoms::tableCellFrame == frameType ||
|
||||
nsGkAtoms::bcTableCellFrame == frameType;
|
||||
}
|
||||
|
||||
return ((ni->Equals(nsGkAtoms::td) ||
|
||||
ni->Equals(nsGkAtoms::table) ||
|
||||
ni->Equals(nsGkAtoms::th)) &&
|
||||
aContent->IsNodeOfType(nsINode::eHTML));
|
||||
static PRBool
|
||||
IsOffsetParent(nsIFrame* aFrame)
|
||||
{
|
||||
nsIAtom* frameType = aFrame->GetType();
|
||||
return (IS_TABLE_CELL(frameType) ||
|
||||
frameType == nsGkAtoms::tableFrame);
|
||||
}
|
||||
|
||||
void
|
||||
@ -579,7 +581,8 @@ nsGenericHTMLElement::GetOffsetRect(nsRect& aRect, nsIContent** aOffsetParent)
|
||||
|
||||
// Add the parent's origin to our own to get to the
|
||||
// right coordinate system.
|
||||
if (!isAbsolutelyPositioned) {
|
||||
PRBool isOffsetParent = IsOffsetParent(parent);
|
||||
if (!isAbsolutelyPositioned && !isOffsetParent) {
|
||||
origin += parent->GetPositionIgnoringScrolling();
|
||||
}
|
||||
|
||||
@ -592,7 +595,7 @@ nsGenericHTMLElement::GetOffsetRect(nsRect& aRect, nsIContent** aOffsetParent)
|
||||
// If the tag of this frame is a offset parent tag and this
|
||||
// element is *not* positioned, break here. Also break if we
|
||||
// hit the body element.
|
||||
if ((!isPositioned && IsOffsetParent(content)) || IsBody(content)) {
|
||||
if ((!isPositioned && isOffsetParent) || IsBody(content)) {
|
||||
*aOffsetParent = content;
|
||||
NS_ADDREF(*aOffsetParent);
|
||||
break;
|
||||
@ -1009,7 +1012,7 @@ nsGenericHTMLElement::GetClientAreaRect()
|
||||
frame->IsFrameOfType(nsIFrame::eReplaced))) {
|
||||
// Special case code to make client area work even when there isn't
|
||||
// a scroll view, see bug 180552, bug 227567.
|
||||
return frame->GetPaddingRect();
|
||||
return frame->GetPaddingRect() - frame->GetPositionIgnoringScrolling();
|
||||
}
|
||||
|
||||
return nsRect(0, 0, 0, 0);
|
||||
|
||||
@ -185,8 +185,10 @@ public:
|
||||
nsIFrame **aFrame = nsnull);
|
||||
|
||||
/**
|
||||
* Get this element's client area rect in app units.
|
||||
* @return the frame's client area
|
||||
* Get this element's client area dimensions in app units.
|
||||
* The rect x, y, width, height are the clientLeft, clientTop, clientWidth,
|
||||
* clientHeight values.
|
||||
* @return the frame's client dimensions
|
||||
*/
|
||||
nsRect GetClientAreaRect();
|
||||
|
||||
|
||||
@ -73,6 +73,8 @@ _TEST_FILES = test_bug589.html \
|
||||
test_bug373589.html \
|
||||
bug372098-link-target.html \
|
||||
test_bug372098.html \
|
||||
test_bug375003-1.html \
|
||||
test_bug375003-2.html \
|
||||
$(NULL)
|
||||
|
||||
libs:: $(_TEST_FILES)
|
||||
|
||||
157
content/html/content/test/test_bug375003-1.html
Executable file
157
content/html/content/test/test_bug375003-1.html
Executable file
@ -0,0 +1,157 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html id="html">
|
||||
<!--
|
||||
https://bugzilla.mozilla.org/show_bug.cgi?id=375003
|
||||
-->
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<title>Test 1 for bug 375003</title>
|
||||
|
||||
<script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
|
||||
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html,body {
|
||||
color:black; background-color:white; font-size:16px; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.s { display:block; width:20px; height:20px; background-color:lime; }
|
||||
table { background:pink; }
|
||||
#td5,#td6 { border:7px solid blue;}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var x = [ 'Left','Top','Width','Height' ];
|
||||
function test(id,s,expected) {
|
||||
var el = document.getElementById(id);
|
||||
for(var i = 0; i < x.length; ++i) {
|
||||
var actual = eval('el.'+s+x[i]);
|
||||
if (expected[i] != -1 && s+x[i]!='scrollHeight')
|
||||
is(actual, expected[i], id+"."+s+x[i]);
|
||||
}
|
||||
}
|
||||
function t3(id,c,o,s,pid) {
|
||||
test(id,'client',c);
|
||||
test(id,'offset',o);
|
||||
test(id,'scroll',s);
|
||||
var p = document.getElementById(id).offsetParent;
|
||||
is(p.id, pid, id+".offsetParent");
|
||||
}
|
||||
|
||||
function run_test() {
|
||||
t3('span1',[0,0,20,20],[12,12,20,20],[0,0,20,20],'td1');
|
||||
t3('td1' ,[1,1,69,44],[16,16,71,46],[0,0,71,46],'table1');
|
||||
t3('tr1' ,[0,0,71,46],[16,16,71,46],[0,0,71,44],'table1');
|
||||
t3('span2',[10,0,20,20],[27,12,30,20],[0,0,30,20],'td2');
|
||||
t3('table1',[9,9,85,113],[10,10,103,131],[0,0,103,50],'body');
|
||||
t3('div1',[10,10,-1,131],[0,0,-1,151],[0,0,-1,85],'body');
|
||||
|
||||
t3('span2b',[10,0,20,20],[25,-1,30,20],[0,0,30,20],'body');
|
||||
t3('span2c',[10,2,18,2],[25,-1,30,6],[0,0,30,20],'body');
|
||||
t3('span2d',[0,0,0,0],[25,-1,10,19],[0,0,10,20],'body');
|
||||
|
||||
t3('span3' ,[0,0,20,20],[15,0,20,20],[0,0,20,20],'td3');
|
||||
t3('td3' ,[0,0,35,20],[0,0,35,20],[0,0,35,20],'table3');
|
||||
t3('tr3' ,[0,0,35,20],[0,0,35,20],[0,0,35,22],'table3');
|
||||
t3('span4' ,[0,0,20,20],[0,0,20,20],[0,0,20,20],'td4');
|
||||
t3('table3',[0,0,35,40],[0,0,35,40],[0,0,35,50],'div3');
|
||||
t3('div3',[10,10,-1,40],[0,151,-1,60],[0,0,-1,70],'body');
|
||||
|
||||
t3('span5' ,[0,0,20,20],[1,1,20,20],[0,0,20,20],'td5');
|
||||
t3('td5' ,[7,7,22,22],[2,2,36,36],[0,0,36,36],'table5');
|
||||
t3('tr5' ,[0,0,36,36],[2,2,36,36],[0,0,36,22],'table5');
|
||||
t3('span6' ,[0,0,20,20],[20,58,20,20],[0,0,20,20],'div5');
|
||||
t3('table5',[0,0,40,78],[0,0,40,78],[0,0,40,78],'div5');
|
||||
t3('div5',[10,10,-1,78],[0,211,-1,98],[0,0,-1,70],'body');
|
||||
|
||||
t3('span7' ,[0,0,20,20],[1,1,20,20],[0,0,20,20],'td7');
|
||||
t3('td7' ,[1,1,37,22],[9,9,39,24],[0,0,39,22],'table7');
|
||||
t3('tr7' ,[0,0,39,24],[9,9,39,24],[0,0,39,22],'table7');
|
||||
t3('span8' ,[0,0,20,20],[26,37,20,20],[0,0,20,20],'table7');
|
||||
t3('table7',[7,7,43,54],[10,319,57,68],[0,0,57,50],'body');
|
||||
t3('div7',[10,10,-1,68],[0,309,-1,88],[0,0,-1,70],'body');
|
||||
|
||||
t3('span9' ,[0,0,20,20],[1,1,20,20],[0,0,20,20],'td9');
|
||||
t3('td9' ,[1,1,22,22],[15,15,24,24],[0,0,24,24],'table9');
|
||||
t3('tr9' ,[0,0,24,24],[15,15,24,24],[0,0,24,22],'table9');
|
||||
// t3('span10' ,[0,0,20,20],[3,30,20,20],[0,0,20,20],'table9');
|
||||
t3('span10' ,[0,0,20,20],[27,450,20,20],[0,0,20,20],'body'); // bug: 'body' should be 'table9'
|
||||
t3('table9',[13,13,28,34],[10,407,54,60],[0,0,54,50],'body');
|
||||
t3('div9',[10,10,-1,0],[0,397,-1,20],[0,0,-1,70],'body');
|
||||
|
||||
t3('span11' ,[0,0,20,20],[1,1,20,20],[0,0,20,20],'td11');
|
||||
t3('td11' ,[0,0,22,22],[2,2,22,22],[0,0,22,22],'table11');
|
||||
t3('tr11' ,[0,0,22,22],[2,2,22,22],[0,0,22,22],'table11');
|
||||
t3('span12' ,[0,0,20,20],[28,454,20,20],[0,0,20,20],'body');
|
||||
t3('table11',[0,0,26,30],[10,427,26,30],[0,0,26,50],'body');
|
||||
t3('div11',[10,10,-1,30],[0,417,-1,50],[0,0,-1,70],'body');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body id="body">
|
||||
|
||||
<div id="content">
|
||||
<div id="div1" style="border:10px solid black">
|
||||
<table id="table1" cellspacing="7" cellpadding="12" border="9">
|
||||
<tbody id="tbody1"><tr id="tr1"><td id="td1"><div class="s" id="span1"></div></td></tr></tbody>
|
||||
<tbody id="tbody2"><tr id="tr2"><td id="td2"><div class="s" id="span2" style="margin-left:15px; border-left:10px solid blue;"></div></td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="div3" style="border:10px solid black; position:relative">
|
||||
<table id="table3" cellpadding="0" cellspacing="0" border="0">
|
||||
<tbody id="tbody3"><tr id="tr3"><td id="td3"><div class="s" id="span3" style="margin-left:15px"></div></td></tr></tbody>
|
||||
<tbody id="tbody4"><tr id="tr4"><td id="td4"><div class="s" id="span4"></div></td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="div5" style="border:10px solid black; position:relative">
|
||||
<table id="table5">
|
||||
<tbody id="tbody5"><tr id="tr5"><td id="td5"><div class="s" id="span5"></div></td></tr></tbody>
|
||||
<tbody id="tbody6"><tr id="tr6"><td id="td6"><div class="s" id="span6" style="left:10px; top:10px; position:relative"></div></td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="div7" style="border:10px solid black;">
|
||||
<table id="table7" style="position:relative" border=7>
|
||||
<tbody id="tbody7"><tr id="tr7"><td id="td7"><div class="s" id="span7"></div></td></tr></tbody>
|
||||
<tbody id="tbody8"><tr id="tr8"><td id="td8"><div class="s" id="span8" style="position:relative; margin-left:15px"></div></td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="div9" style="border:10px solid black;">
|
||||
<table id="table9" style="position:absolute" border="13">
|
||||
<tbody id="tbody9"><tr id="tr9"><td id="td9"><div class="s" id="span9"></div></td></tr></tbody>
|
||||
<tbody id="tbody10"><tr id="tr10"><td id="td10"><div class="s" id="span10" style="position:absolute"></div></td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="div11" style="border:10px solid black; ">
|
||||
<table id="table11">
|
||||
<tbody id="tbody11"><tr id="tr11"><td id="td11"><div class="s" id="span11"></div></td></tr></tbody>
|
||||
<tbody id="tbody12"><tr id="tr12"><td id="td12"><div class="s" id="span12" style="position:absolute;margin-left:15px"></div></td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="border:10px solid black">
|
||||
<div class="s" id="span2b" style="margin-left:15px; border-left:10px solid blue;"></div></div>
|
||||
|
||||
<div style="border:10px solid black">
|
||||
<button id="span2c" style="margin-left:15px; border-left:10px solid blue;"></button></div>
|
||||
|
||||
<div style="border:10px solid black">
|
||||
<span id="span2d" style="margin-left:15px; border-left:10px solid blue;"></span></div>
|
||||
</div>
|
||||
|
||||
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=375003">Mozilla Bug 375003</a>
|
||||
|
||||
<pre id="test">
|
||||
<script class="testbody" type="text/javascript">
|
||||
run_test();
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
108
content/html/content/test/test_bug375003-2.html
Normal file
108
content/html/content/test/test_bug375003-2.html
Normal file
@ -0,0 +1,108 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<!--
|
||||
https://bugzilla.mozilla.org/show_bug.cgi?id=375003
|
||||
-->
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<title>Test 2 for bug 375003</title>
|
||||
|
||||
<script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
|
||||
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html {
|
||||
padding:0; margin:0;
|
||||
}
|
||||
body {
|
||||
color:black; background-color:white; font-size:12px; padding:10px; margin:0;
|
||||
}
|
||||
|
||||
#div1,#abs1,#table1 {
|
||||
border: 20px solid lime;
|
||||
padding: 30px;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
overflow:scroll;
|
||||
}
|
||||
#abs1,#table2parent {
|
||||
position:absolute;
|
||||
left:500px;
|
||||
}
|
||||
#table3parent {
|
||||
position:fixed;
|
||||
left:300px;
|
||||
top:100px;
|
||||
}
|
||||
.content {
|
||||
display:block;
|
||||
width:200px;
|
||||
height:200px;
|
||||
background:yellow;
|
||||
border: 0px dotted black;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var x = [ 'Left','Top','Width','Height' ];
|
||||
function test(id,s,expected) {
|
||||
var el = document.getElementById(id);
|
||||
for(var i = 0; i < x.length; ++i) {
|
||||
var actual = eval('el.'+s+x[i]);
|
||||
if (expected[i] != -1 && s+x[i]!='scrollHeight')
|
||||
is(actual, expected[i], id+"."+s+x[i]);
|
||||
}
|
||||
}
|
||||
function t3(id,c,o,s,pid) {
|
||||
test(id,'client',c);
|
||||
test(id,'offset',o);
|
||||
test(id,'scroll',s);
|
||||
var p = document.getElementById(id).offsetParent;
|
||||
is(p.id, pid, id+".offsetParent");
|
||||
}
|
||||
|
||||
function run_test() {
|
||||
t3('div1',[20,20,144,104],[10,10,200,160],[0,0,230,20],'body');
|
||||
t3('abs1',[20,20,144,104],[500,170,200,160],[0,0,230,20],'body');
|
||||
t3('table1',[20,20,266,266],[10,170,306,306],[0,0,306,20],'body');
|
||||
t3('table2',[0,0,206,206],[0,0,206,206],[0,0,206,20],'table2parent');
|
||||
t3('table3',[10,10,208,208],[0,0,228,228],[0,0,228,228],'table3parent');
|
||||
t3('table3parent',[0,0,228,228],[300,100,228,228],[0,0,228,228],'body');
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="body">
|
||||
<div id="content">
|
||||
<div id="div1parent">
|
||||
<div id="div1"><span class="content">DIV</span></div>
|
||||
</div>
|
||||
|
||||
<div id="abs1parent">
|
||||
<div id="abs1"><span class="content">abs.pos.DIV</span></div>
|
||||
</div>
|
||||
|
||||
<div id="table1parent">
|
||||
<table id="table1"><tbody><tr><td id="td1"><span class="content">TABLE</span></td></tr></tbody></table>
|
||||
</div>
|
||||
|
||||
<div id="table2parent">
|
||||
<table id="table2"><tbody><tr><td id="td2"><span class="content">TABLE in abs</span></td></tr></tbody></table>
|
||||
</div>
|
||||
|
||||
<div id="table3parent">
|
||||
<table id="table3" border="10"><tbody><tr><td id="td3"><span class="content">TABLE in fixed</span></td></tr></tbody></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pre id="test">
|
||||
<script class="testbody" type="text/javascript">
|
||||
run_test();
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user