W3C home > Mailing lists > Public > www-style@w3.org > April 2011

Re: [cssom] Element size/positioning information

From: Gérard Talbot <www-style@gtalbot.org>
Date: Mon, 11 Apr 2011 21:32:58 -0700
Message-ID: <e5742f1c1b744c0815ca7341511d6510.squirrel@cp3.shieldhost.com>
To: "Garrett Smith" <dhtmlkitchen@gmail.com>
Cc: "www-style list" <www-style@w3.org>

Le Lun 11 avril 2011 21:07, Garrett Smith a écrit :
> On 4/11/11, "Gérard Talbot" <www-style@gtalbot.org> wrote:
>>
>> Le Lun 11 avril 2011 18:46, Garrett Smith a écrit :
>>> On 4/11/11, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>>>> The current OM APIs for determining the size and position of an
>>>> element are verbose and confusing.
>>> Uh huh.
>>>
>>>> Determining the Size of an Element
>>>> ==================================
>>>>
>>>> Right now there are four ways of asking for the width of an element:
>>>> elem.clientWidth, elem.scrollWidth,
>>>> elem.getBoundingClientRect().width, and
>>> Nope. The `width` property is not reliable cross-browser. That's yet
>>> another example of  AVK taking an MS APIs and changing it to make it
>>> incompatible with the very API it is purported to standardize. Can you
>>> think of a better way make browsers more interoperable?
>>>
>>>> getComputedStyle(elem,'').width (similarly for height).
>>>
>>> Uh , aren't you forgetting offsetWidth?
>>>
>>>>
>>>> It's completely unobvious what each of these do
>>> That happens when you don't read specs. (From MSDN, MDC, W3C).
>>
>>
>> Hello Garrett :)
>>
> Hey.
>
>> You have to be careful too about specs and documentation websites from
>> browser manufacturers. There are errors too in those. And browsers also
>> have bugs too, you know :)
>>
> Yeah.
>
>> There are at least 4 errors in the diagrams of this MSDN webpage:
>>
>> http://msdn.microsoft.com/en-us/library/ms533024.aspx
>>
>> 1- top and left offset properties are shown to be located between margin
>> area and padding area: this is clearly wrong.
>
> There isn't any margin area; AFAICT margin could be 0.


Garrett, observe the 2nd diagram at ms533024.aspx. The middle diagram.

div.style.top is located between div.style.marginTop and div.clientTop :
that implies a violation of the CSS1 box model. Offsets (top, left,
bottom, right) must apply to margin box, to the CSS1 box model.


Observe this diagram:

http://www.w3.org/TR/CSS21/images/boxdim.png

taken from

http://www.w3.org/TR/CSS21/box.html#box-dimensions

The offsets (top, left, bottom, right) are outside the CSS1 box model.
That is not what MSDN does in the 2nd diagram.

I have MSDN previous measurement and position diagram at

http://www.gtalbot.org/DHTMLSection/WindowEventsNS6.html

and they did the same mistake.

In another document

http://msdn.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic3

they show the offsets at the correct places:

http://i.msdn.microsoft.com/dynimg/IC108558.gif




>
> "The sample page contains a div element that is relatively positioned
> on the page."
>
> Whether or not offsetTop includes the border width (clientTop) depends
> on the version and mode of IE.

That is also not useful. I do not know if offsetTop is suppose to include
border-top width from examining MSDN's own diagram. So, this is another
mistake.

regards, Gérard
-- 
CSS 2.1 Test suite RC6, March 23rd 2011
http://test.csswg.org/suites/css2.1/20110323/html4/toc.html

Contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/

Web authors' contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/web-authors-contributions-css21-testsuite.html
Received on Tuesday, 12 April 2011 04:33:30 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:39 GMT