Closed Bug 111207 Opened 23 years ago Closed 17 years ago

Implement clientLeft and clientTop

Categories

(Core :: DOM: Core & HTML, defect)

Product:
Core
Component:
DOM: Core & HTML
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
VERIFIED FIXED
Milestone:
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)

bug demo
1.15 KB, text/html
Details
Clearer test case (Note: you need layout.scrollbar.side=1 for the RTL part to work)
2.39 KB, text/html
Details
Testcase #3
4.66 KB, text/html
Details
Patch rev. 1
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.
Attached file bug demo — 

    
    

    
  
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?

    
    

    
  
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

    
    

    
  
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...

    
    

    
  
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. ***

    
  
Blocks: 26793

    
  
Keywords: mozilla1.3

    
    

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

    
    

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

    
    

    
  


  
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.

    
  
Keywords: testcase

    
    

    
  
Mass-reassigning bugs to dom_bugs@netscape.com
Assignee: jst → dom_bugs

    
  
Blocks: 196779

    
    

    
  
Component -> DOM: Mozilla Extensions
Component: DOM → DOM: Mozilla Extensions

    
  
OS: Windows 2000 → All

    
    

    
  
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?

    
    

    
  
> 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

    
  

        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)

    
    

    
  

      
      
      
      

        Attached file
          
        Testcase #3
        — 
      

    


  

    
    

    
  

      
      
      
      

        Attached patch
          
          
        Patch rev. 1
        — 
          — Splinter Review
      

    


  
Assignee: general → mats.palmgren
Status: NEW → ASSIGNED

        Attachment #257214 -
        Flags: superreview?(roc)

        Attachment #257214 -
        Flags: review?(roc)

        Attachment #257214 -
        Attachment is patch: true

        Attachment #257214 -
        Attachment mime type: text/html → text/plain

        Attachment #257214 -
        Flags: superreview?(roc)

        Attachment #257214 -
        Flags: superreview+

        Attachment #257214 -
        Flags: review?(roc)

        Attachment #257214 -
        Flags: review+

    
    

    
  
(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

    
    

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

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

    
    

    
  
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

    
    

    
  
I just updated accordingly those 3 MDC documents.

    
    

    
  
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?
No longer depends on: 383898
Component: DOM: Mozilla Extensions → DOM

    
  
Depends on: 1268280
Component: DOM → DOM: Core & HTML

    
  
Depends on: 1654769

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






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: