Last Comment Bug 111207 - Implement clientLeft and clientTop
: Implement clientLeft and clientTop
Status: VERIFIED FIXED
: compat, dev-doc-complete, testcase
Product: Core
Classification: Components
Component: DOM (show other bugs)
: Trunk
: All All
: -- normal with 1 vote (vote)
: mozilla1.9alpha3
Assigned To: Mats Palmgren (:mats)
: Hixie (not reading bugmail)
Mentors:
: 159365 (view as bug list)
Depends on: 1268280
Blocks: 26793 196779
  Show dependency treegraph
 
Reported: 2001-11-21 07:56 PST by Martin Honnen
Modified: 2016-04-27 19:40 PDT (History)
13 users (show)
mats: in‑testsuite?
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
bug demo (1.15 KB, text/html)
2001-11-21 07:58 PST, Martin Honnen
no flags Details
Clearer test case (Note: you need layout.scrollbar.side=1 for the RTL part to work) (2.39 KB, text/html)
2002-12-12 14:57 PST, Erik Arvidsson
no flags Details
Testcase #3 (4.66 KB, text/html)
2007-03-04 04:19 PST, Mats Palmgren (:mats)
no flags Details
Patch rev. 1 (9.01 KB, patch)
2007-03-04 04:21 PST, Mats Palmgren (:mats)
roc: review+
roc: superreview+
Details | Diff | Review

Description Martin Honnen 2001-11-21 07:56:04 PST
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.
Comment 1 Martin Honnen 2001-11-21 07:58:50 PST
Created attachment 58704 [details]
bug demo
Comment 2 Fabian Guisset 2001-11-21 09:35:03 PST
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 Boris Zbarsky [:bz] 2001-11-21 13:33:59 PST
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 Johnny Stenback (:jst, jst@mozilla.com) 2001-11-21 14:12:08 PST
Do we really need clientLeft and clientTop? Isn't that the same as offsetLeft
and offsetTop?
Comment 5 Martin Honnen 2001-11-21 14:42:30 PST
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 Alberto Marabini 2002-03-21 03:52:40 PST
scrollLeft,scrollTop,scrollWidth,scrollHeight
returns 0 for the body object on Moz 0.9.9 win 2000
Comment 7 Boris Zbarsky [:bz] 2002-06-25 02:42:23 PDT
So is this bug now limited to clientLeft/clientTop?  If so, please resummarize...
Comment 8 Gérard Talbot 2002-07-15 09:21:00 PDT
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 Boris Zbarsky [:bz] 2002-07-25 20:11:46 PDT
*** Bug 159365 has been marked as a duplicate of this bug. ***
Comment 10 José Jeria 2002-12-12 06:19:10 PST
Updating Summary, scrollWidth and clientWidth works fine.
Comment 11 José Jeria 2002-12-12 06:20:39 PST
*** Bug 159365 has been marked as a duplicate of this bug. ***
Comment 12 Erik Arvidsson 2002-12-12 14:57:58 PST
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.
Comment 13 Johnny Stenback (:jst, jst@mozilla.com) 2003-03-23 12:50:12 PST
Mass-reassigning bugs to dom_bugs@netscape.com
Comment 14 Gérard Talbot 2005-11-16 21:23:14 PST
Component -> DOM: Mozilla Extensions
Comment 15 Gérard Talbot 2006-10-10 11:06:32 PDT
adding dev-doc-needed keyword
Comment 16 Eric Shepherd [:sheppy] 2007-01-02 08:23:24 PST
Does this need any doc attention now, or are we still waiting on changes to the code first?
Comment 17 Gérard Talbot 2007-01-02 14:08:51 PST
> Does this need any doc attention now

No. The documentation for clientLeft and clientTop is already available at MDC.

dev-doc-needed keyword removed
Comment 18 Mats Palmgren (:mats) 2007-03-04 04:19:02 PST
Created attachment 257212 [details]
Testcase #3
Comment 19 Mats Palmgren (:mats) 2007-03-04 04:21:18 PST
Created attachment 257214 [details] [diff] [review]
Patch rev. 1
Comment 21 Mats Palmgren (:mats) 2007-03-15 16:04:12 PDT
(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
Comment 22 Mats Palmgren (:mats) 2007-03-15 17:44:29 PDT
Checked in to trunk at 2007-03-15 16:05 PST.

-> FIXED
Comment 23 Gérard Talbot 2007-03-16 13:14:58 PDT
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
Comment 24 Gérard Talbot 2007-03-17 11:52:41 PDT
I just updated accordingly those 3 MDC documents.
Comment 25 Nickolay_Ponomarev 2007-03-18 16:51:32 PDT
Also mentioned on http://developer.mozilla.org/en/docs/Firefox_3_for_developers

Thanks for updating the docs, GT.
Comment 26 Boris Zbarsky [:bz] 2007-06-09 23:36:53 PDT
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?
Comment 27 Robert O'Callahan (:roc) (Exited; email my personal email if necessary) 2007-06-10 14:41:06 PDT
Sorry, that's just my fault.
Comment 28 Patrick McManus [:mcmanus] 2014-12-13 08:20:02 PST
*** Bug 1111141 has been marked as a duplicate of this bug. ***

Note You need to log in before you can comment on or make changes to this bug.