Closed
Bug 111207
Opened 23 years ago
Closed 18 years ago
Implement clientLeft and clientTop
Categories
(Core :: DOM: Core & HTML, defect)
Core
DOM: Core & HTML
Tracking
()
VERIFIED
FIXED
mozilla1.9alpha3
People
(Reporter: martin.honnen, Assigned: MatsPalmgren_bugz)
References
(Depends on 1 open bug)
Details
(Keywords: compat, dev-doc-complete, testcase)
Attachments
(4 files)
|
1.15 KB,
text/html
|
Details | |
|
2.39 KB,
text/html
|
Details | |
|
4.66 KB,
text/html
|
Details | |
|
9.01 KB,
patch
|
roc
:
review+
roc
:
superreview+
|
Details | Diff | Splinter Review |
When I run the following page
<html>
<head>
<title>scrollable div</title>
<script type="text/javascript">
function inspectNewProperties (node) {
var props = ['clientLeft', 'clientTop', 'clientWidth', 'clientHeight',
'scrollLeft', 'scrollTop', 'scrollWidth', 'scrollHeight'];
output('Inspection of ' + node + ':');
for (var i = 0; i < props.length; i++)
output(props[i] + ': ' + node[props[i]]);
output('');
}
function output (text) {
document.getElementById('output').appendChild(document.createTextNode(text));
document.getElementById('output').appendChild(document.createElement('br'));
}
</script>
</head>
<body>
<div id="aDiv"
style="width: 300px;
height: 200px;
overflow: auto;"
>
<script type="text/javascript">
for (var i = 0; i < 100; i++)
document.write(i + ' Kibology <br \/>');
</script>
</div>
<br />
<input type="button" value="please scroll the div with the scrollbars then click
here to reinspect"
onclick="inspectNewProperties(document.getElementById('aDiv'));"
/>
<div id="output"></div>
<script type="text/javascript">
inspectNewProperties(document.getElementById('aDiv'));
</script>
</body>
</html>
in IE6 it outputs
Inspection of [object]:
clientLeft: 0
clientTop: 0
clientWidth: 283
clientHeight: 200
scrollLeft: 0
scrollTop: 0
scrollWidth: 283
scrollHeight: 1900
while Mozilla 0.9.6 outputs
Inspection of [object HTMLDivElement]:
clientLeft: undefined
clientTop: undefined
clientWidth: 0
clientHeight: 0
scrollLeft: 0
scrollTop: 0
scrollWidth: 0
scrollHeight: 0
that is the clientWidth, clientHeight, scrollWidth, scrollHeight properties are
all wrongly 0. The clientLeft/clientTop properties do not seem to be implemented.
When I scroll the div with the scrollbar to the bottom and then click the button
I get with IE6
Inspection of [object]:
clientLeft: 0
clientTop: 0
clientWidth: 283
clientHeight: 200
scrollLeft: 0
scrollTop: 1700
scrollWidth: 283
scrollHeight: 1900
and with Mozilla
Inspection of [object HTMLDivElement]:
clientLeft: undefined
clientTop: undefined
clientWidth: 283
clientHeight: 200
scrollLeft: 0
scrollTop: 1700
scrollWidth: 0
scrollHeight: 1700
that is now at least scrollHeight and clientWidth/clientHeight are set but
scrollWidth is still 0. The scrollHeight value of 1700 seems to be wrong, if
scrollTop is 1700 then scrollTop needs to 1700 + clientHeight which is 1700 +
200 which is 1900.
|
Reporter | |
Comment 1•23 years ago
|
||
|
||
Comment 2•23 years ago
|
||
A slew of fixes landed saturday 17th november, and they are not in 0.9.6
(see bug 62536 for details).
Would be nice if someone with a nightly could test the neat testcases.
|
||
Comment 3•23 years ago
|
||
With Mozilla nightly (linux and solaris, but exact numbers below from Linux), I
see:
Before scrolling:
clientLeft: undefined
clientTop: undefined
clientWidth: 286
clientHeight: 200
scrollLeft: 0
scrollTop: 0
scrollWidth: 286
scrollHeight: 1700
After scrolling:
clientLeft: undefined
clientTop: undefined
clientWidth: 286
clientHeight: 200
scrollLeft: 0
scrollTop: 1500
scrollWidth: 286
scrollHeight: 1700
So looks like *Width and *Height are correct now correctly nonzero before
scrolling. clientLeft/clientTop are still not working.
After scrolling, scrollWidth is still set, and scrollTop + clientHeight =
scrollHeight, so this is OK as well.
This just leaves the clientLeft/clientTop problem.
|
||
Comment 4•23 years ago
|
||
Do we really need clientLeft and clientTop? Isn't that the same as offsetLeft
and offsetTop?
|
|
Reporter | |
Comment 5•23 years ago
|
||
Here is the msdn explanation of clientLeft
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientLeft.asp
At least in IE's DOM clientLeft and offsetLeft are very different, for instance with
<div id="aSpan"
style="position: absolute;
left: 100px; top: 100px;
border: 10px solid green;
background-color: lightblue;"
onclick="alert('this.clientLeft: ' + this.clientLeft + '; this.offsetLeft:
' + this.offsetLeft)"
>click me</div>
the offsetLeft is 100, the clientLeft is 10.
See also
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/measuring.asp
|
||
Comment 6•23 years ago
|
||
scrollLeft,scrollTop,scrollWidth,scrollHeight
returns 0 for the body object on Moz 0.9.9 win 2000
|
|
||
Comment 7•23 years ago
|
||
So is this bug now limited to clientLeft/clientTop? If so, please resummarize...
|
||
Comment 8•23 years ago
|
||
AFAIK, element.clientLeft and element.clientTop are the among the very few
(last?) DHTML object model properties which need to be implemented. I wish too
that these 2 properties be implemented, either in this #111207 bugfile or at
#62536 bugfile.
In comment #101 of bug #62536, E. Arvidsson correctly states and accurately
anticipates that the value of element.clientLeft should consider and compute the
width of a vertical scroll bar at its left-side (in case where dir="rtl" is
declared). In fact, this is exactly what happens in MSIE 6.
|
|
||
Comment 9•23 years ago
|
||
*** Bug 159365 has been marked as a duplicate of this bug. ***
|
||
Updated•22 years ago
|
Keywords: mozilla1.3
|
|
||
Comment 10•22 years ago
|
||
Updating Summary, scrollWidth and clientWidth works fine.
Summary: scrollWidth/scrollHeight/clientWidth/clientHeight incompatibilities → Implement clientLeft and clientTop
|
|
||
Comment 11•22 years ago
|
||
*** Bug 159365 has been marked as a duplicate of this bug. ***
|
||
Comment 12•22 years ago
|
||
Since the original "Implement clientLeft/Top" was marked as a dupe of this
"scrollWidth vs clientWidth" bug I've updated this bug with the original test
case. This includes the right-to-left case where a scroll bar will effect the
clientLeft value.
|
|
||
Comment 14•19 years ago
|
||
Component -> DOM: Mozilla Extensions
Component: DOM → DOM: Mozilla Extensions
|
|
||
Updated•19 years ago
|
OS: Windows 2000 → All
|
||
Comment 16•18 years ago
|
||
Does this need any doc attention now, or are we still waiting on changes to the code first?
|
|
||
Comment 17•18 years ago
|
||
> Does this need any doc attention now
No. The documentation for clientLeft and clientTop is already available at MDC.
dev-doc-needed keyword removed
Keywords: dev-doc-needed
|
Assignee | |
Updated•18 years ago
|
Attachment #109165 -
Attachment description: Clearer test case (from 111207) → Clearer test case (Note: you need layout.scrollbar.side=1 for the RTL part to work)
|
|
Assignee | |
Comment 18•18 years ago
|
||
|
|
Assignee | |
Comment 19•18 years ago
|
||
Assignee: general → mats.palmgren
Status: NEW → ASSIGNED
Attachment #257214 -
Flags: superreview?(roc)
Attachment #257214 -
Flags: review?(roc)
|
||
Updated•18 years ago
|
Attachment #257214 -
Attachment is patch: true
Attachment #257214 -
Attachment mime type: text/html → text/plain
|
|
||
Comment 20•18 years ago
|
||
Another testcase:
http://www.gtalbot.org/BugzillaSection/DocumentAllDHTMLproperties.html
MDC documentation:
http://developer.mozilla.org/en/docs/DOM:element.clientLeft
http://developer.mozilla.org/en/docs/DOM:element.clientTop
Mats, your testcase (attachment 257212 [details]) is quite exhaustive. :)
Attachment #257214 -
Flags: superreview?(roc)
Attachment #257214 -
Flags: superreview+
Attachment #257214 -
Flags: review?(roc)
Attachment #257214 -
Flags: review+
|
|
Assignee | |
Comment 21•18 years ago
|
||
(In reply to comment #20)
> http://developer.mozilla.org/en/docs/DOM:element.clientLeft
> http://developer.mozilla.org/en/docs/DOM:element.clientTop
FYI, the sentence that describes the vertical scrollbar position for a
right-to-left element will not be the default behavior for Firefox 3.
See http://kb.mozillazine.org/Layout.scrollbar.side
|
|
Assignee | |
Comment 22•18 years ago
|
||
Checked in to trunk at 2007-03-15 16:05 PST.
-> FIXED
Status: ASSIGNED → RESOLVED
Closed: 18 years ago
Flags: in-testsuite?
Keywords: compat
Hardware: PC → All
Resolution: --- → FIXED
|
|
||
Comment 23•18 years ago
|
||
I checked all of the testcases with Seamonkey 1.5a rv:1.9a3pre build 2007031608 under XP Pro SP2 and also tried the 0, 1, 2 and 3 property values for layout.scrollbar.side property and everything looks correct, behaves, reacts accordingly. Bravo, Mats! :)
Marking VERIFIED
------------
The only issue remaining are MDC-related: it would be to update (some tweaks) accordingly the files
http://developer.mozilla.org/en/docs/DOM:element.clientLeft
http://developer.mozilla.org/en/docs/DOM:element.clientTop
and
http://developer.mozilla.org/en/docs/DOM:element#Properties
Status: RESOLVED → VERIFIED
|
|
||
Comment 24•18 years ago
|
||
I just updated accordingly those 3 MDC documents.
|
||
Comment 25•18 years ago
|
||
Also mentioned on http://developer.mozilla.org/en/docs/Firefox_3_for_developers
Thanks for updating the docs, GT.
|
|
||
Comment 26•18 years ago
|
||
This almost certainly caused bug 383898. And we _really_ need to get these tests added to the test suite. What's blocking that, exactly? And why did this even get review without tests or some indication of what the test plan is?
Sorry, that's just my fault.
|
||
Updated•12 years ago
|
Component: DOM: Mozilla Extensions → DOM
|
|
||
Updated•6 years ago
|
Component: DOM → DOM: Core & HTML
You need to log in
before you can comment on or make changes to this bug.
Description
•