Wrong offsetWidth value on <TD>

RESOLVED INVALID

Status

()

Core
DOM: CSS Object Model
RESOLVED INVALID
7 years ago
7 years ago

People

(Reporter: TinyFox, Unassigned)

Tracking

({testcase})

Trunk
x86
Windows 7
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

7 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16

<html>
	<head>
		<title>offsetWidth rounding issue</title>
	</head>
	<body>
		<table width="501px">
			<tr>
				<td style="background-color: green" id="td1">TD 1</td>
				<td style="background-color: red" id="td2">TD 2</td>
			</tr>
		</table>
		<script>
			alert(document.getElementById("td1").offsetWidth + ', ' + document.getElementById("td2").offsetWidth);
		</script>
	</body>
</html>

In the html page above, offsetWidth values returned by javascript are 248, 248. But the real widths on the screen is 248, 247. Not sure if this is caused by number rounding.


Reproducible: Always

Steps to Reproduce:
1. Load the html file given in description. You will see a dialog printing out the offsetWidth values returned by javascript.
2. Compare to the real width on the screen.

Actual Results:  
You will see values 248, 248.

Expected Results:  
Should be 248, 247, compared to what's on the screen.
(Reporter)

Updated

7 years ago
Version: unspecified → 3.6 Branch

Comment 1

7 years ago
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16

Mozilla/5.0 (Windows NT 6.1; rv:6.0a1) Gecko/20110428 Firefox/6.0a1

Able to reproduce.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Version: 3.6 Branch → unspecified

Comment 2

7 years ago
Before changing status to NEW, please check:
* Vesion (is it a Problem in Fx4 (Fx5) too?)
* Product, Component (this is Core, Layout, I'd say)
* NEW bugs in Core-Layout needs a testcase (attach the code in comment 0 as HTML attachment)
Status: NEW → UNCONFIRMED
Ever confirmed: false

Comment 3

7 years ago
> * Version (is it a Problem in Fx4 (Fx5) too?)
sorry, of course you dis this.
Version: unspecified → Trunk

Comment 4

7 years ago
Created attachment 529156 [details]
Testcase

WFM, using Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:5.0a2) Gecko/20110429 Firefox/5.0a2

Comment 5

7 years ago
Also WFM with Firefox 4.0. Alert says "248, 248"

Updated

7 years ago
Keywords: testcase

Comment 6

7 years ago
> Also WFM with Firefox 4.0. Alert says "248, 248"

Expected is "247, 248" (what WebKit and Opera show)
Fx and IE alert "248, 248"
(Reporter)

Comment 7

7 years ago
j.j.,

Webkit shows 247, 248 because the real widths are 247, 248 on the screen in Chrome/Safari. The real widths on Firefox are 248, 247. (i.e. The second <TD> is shorter.) Their behaviors are different.

We should count on Firefox's behavior to determine the expected values, not other
browsers' spec.

Firefox 4 has the same issue like José Jeria mentioned.
Bug 65548 related?

Updated

7 years ago
Component: General → DOM: CSS Object Model
Product: Firefox → Core
QA Contact: general → style-system
This is invalid.

The layout widths for those tables are 247.5 pixels each.  When they are rendered, the edges are antialiased, so they actually share rendered pixels with the cellspacing and the like.  Depending on how you were examining your screen pixels, this may have led you to conclude that they have different widths on screen.  Of course if you use a DOM API that rounds widths to integers, then you ask for "247.5" rounded to an integer which is 248.  This is a fundamental limitation of the offsetWidth API: it can't actually properly represent layout information unless you round off all your layout calculations to integer pixels (which is what Opera and WebKit do).

If you want to ask for the actual widths of things, use getBoundingClientRect().  Doing this:

  alert(document.getElementById("td1").getBoundingClientRect().width + ", " +
        document.getElementById("td2").getBoundingClientRect().width)

shows "247.5, 247.5" for me.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 7 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.