Implement clientLeft and clientTop

VERIFIED FIXED in mozilla1.9alpha3

Status

()

Core
DOM
VERIFIED FIXED
16 years ago
a year ago

People

(Reporter: Martin Honnen, Assigned: mats)

Tracking

(Depends on: 1 bug, {compat, dev-doc-complete, testcase})

Trunk
mozilla1.9alpha3
compat, dev-doc-complete, testcase
Points:
---
Dependency tree / graph
Bug Flags:
in-testsuite ?

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(4 attachments)

(Reporter)

Description

16 years ago
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

16 years ago
Created attachment 58704 [details]
bug demo

Comment 2

16 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.
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.
Do we really need clientLeft and clientTop? Isn't that the same as offsetLeft
and offsetTop?
(Reporter)

Comment 5

16 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

15 years ago
scrollLeft,scrollTop,scrollWidth,scrollHeight
returns 0 for the body object on Moz 0.9.9 win 2000
So is this bug now limited to clientLeft/clientTop?  If so, please resummarize...

Comment 8

15 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.
*** Bug 159365 has been marked as a duplicate of this bug. ***

Updated

15 years ago
Blocks: 26793

Updated

15 years ago
Keywords: mozilla1.3

Comment 10

15 years ago
Updating Summary, scrollWidth and clientWidth works fine.
Summary: scrollWidth/scrollHeight/clientWidth/clientHeight incompatibilities → Implement clientLeft and clientTop

Comment 11

15 years ago
*** Bug 159365 has been marked as a duplicate of this bug. ***

Comment 12

15 years ago
Created attachment 109165 [details]
Clearer test case (Note: you need layout.scrollbar.side=1 for the RTL part to work)

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.

Updated

15 years ago
Keywords: testcase
Mass-reassigning bugs to dom_bugs@netscape.com
Assignee: jst → dom_bugs

Updated

13 years ago
Blocks: 196779

Comment 14

12 years ago
Component -> DOM: Mozilla Extensions
Component: DOM → DOM: Mozilla Extensions

Updated

11 years ago
OS: Windows 2000 → All

Comment 15

11 years ago
adding dev-doc-needed keyword
Keywords: dev-doc-needed
Does this need any doc attention now, or are we still waiting on changes to the code first?

Comment 17

11 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

10 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

10 years ago
Created attachment 257212 [details]
Testcase #3
(Assignee)

Comment 19

10 years ago
Created attachment 257214 [details] [diff] [review]
Patch rev. 1
Assignee: general → mats.palmgren
Status: NEW → ASSIGNED
Attachment #257214 - Flags: superreview?(roc)
Attachment #257214 - Flags: review?(roc)

Updated

10 years ago
Attachment #257214 - Attachment is patch: true
Attachment #257214 - Attachment mime type: text/html → text/plain

Comment 20

10 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

10 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

10 years ago
Checked in to trunk at 2007-03-15 16:05 PST.

-> FIXED
Status: ASSIGNED → RESOLVED
Last Resolved: 10 years ago
Flags: in-testsuite?
Keywords: compat
Hardware: PC → All
Resolution: --- → FIXED

Comment 23

10 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

10 years ago
I just updated accordingly those 3 MDC documents.

Comment 25

10 years ago
Also mentioned on http://developer.mozilla.org/en/docs/Firefox_3_for_developers

Thanks for updating the docs, GT.
Keywords: dev-doc-complete
QA Contact: gerardok → ian
Target Milestone: --- → mozilla1.9alpha3
Depends on: 383898
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?

Updated

10 years ago
No longer depends on: 383898
Sorry, that's just my fault.
Component: DOM: Mozilla Extensions → DOM
Product: Core → Core
Duplicate of this bug: 1111141

Updated

a year ago
Depends on: 1268280
You need to log in before you can comment on or make changes to this bug.