400258 - offsetLeft includes borders when box-sizing is border-box

Status: RESOLVED FIXED

(Core :: DOM: CSS Object Model, defect, P2)

Description

[Marcus Better]

User-Agent:       Mozilla/5.0 (compatible; Konqueror/3.5; Linux) KHTML/3.5.7 (like Gecko) (Debian)
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20070723 Iceweasel/2.0.0.6

The offsetParent's border is usually not included in the offsetLeft value. However if the parent's -moz-box-sizing is "border-box", then the border _is_ included.

This is contrary to how MSIE 7 and WebKit behave (see http://bugs.webkit.org/show_bug.cgi?id=15539).

Reproducible: Always

Comment 1

[Marcus Better]

Attachment: Test case

This shows the values that are included in the offsetLeft of the div2 element. The box turns red if the test fails. Expected results are 384,384 (div2 margin plus div2 top/left).

(Note that the bug equally affects offsetTop.)

Comment 2

[Marcus Better]

Attachment: Test result for Firefox 2.0.0.6.

Comment 3

[Mats Palmgren (inactive)]

Spec: https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetleft
I don't see any special handling for box-sizing: border-box in the spec so this definitely looks like a bug to me.
Incidentally, it also makes us erroneously fail some WPTs that use offsetLeft/offsetTop to verify the correct layout.
https://searchfox.org/mozilla-central/search?q=checkLayout(

Yikes, I can't believe this bug has been open for 12 years without anyone investigating it...

Comment 4

[Mats Palmgren (inactive)]

Attachment: Bug 400258 - Use the padding edge as the origin for offsetLeft/offsetTop also for box-sizing:border-box boxes. r=emilio

This is what the spec says and is compatible with other UAs.
https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetleft

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2a9d67d7b2d2
Use the padding edge as the origin for offsetLeft/offsetTop also for box-sizing:border-box boxes.  r=emilio

Comment 6

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/19057 for changes under testing/web-platform/tests

Comment 7

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Can't merge web-platform-tests PR due to failing upstream checks:
Github PR https://github.com/web-platform-tests/wpt/pull/19057
* Taskcluster (pull_request) (https://tools.taskcluster.net/task-group-inspector/#/XsiDFx-wS_mjFxqxKJhgNw)

Comment 8

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/2a9d67d7b2d2

Comment 9

[James Graham [:jgraham]]

Attachment: Bug 400258 - Move CSSOM test to load Ahem as a webfont,

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/42cdcfe496d6
Move CSSOM test to load Ahem as a webfont, r=emilio

Comment 11

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.

Comment 12

[Andrei Ciure[:aciure]]

https://hg.mozilla.org/mozilla-central/rev/42cdcfe496d6

Comment 13

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot